How to add a space in a programmically-generated span?

Question

I have code that wraps a <span> around each word in a <div>. The problem I'm having is that it doesn't add a space after each word so it looks like a continuing sentence. Is there a way to add space at the end of each word when wrapping each word in a <span>?

My JS code:

$('.line_wrap').each(function(){ 
 var words = $(this).text().split(/\s+/);
 var total = words.length;
 $(this).empty();
 for (index = 0; index < total; index ++){
   $(this).append($("<span /> ").text(words[index]));
 }
})

Working example:

$('.line_wrap').each(function(){ 
  var words = $(this).text().split(/\s+/);
  var total = words.length;
  $(this).empty();
  for (index = 0; index < total; index ++){
    $(this).append($("<span /> ").text(words[index]));
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <div class="line_wrap">
                    Lorem Khaled Ipsum is a major key to success. They will try to close the door on you, just open it. Watch your back, but more importantly when you get out the shower, dry your back, it’s a cold world out there. The other day the grass was brown, now it’s green because I ain’t give up. Never surrender. Every chance I get, I water the plants, Lion! In life you have to take the trash out, if you have trash in your life, take it out, throw it away, get rid of it, major key. You do know, you do know that they don’t want you to have lunch. I’m keeping it real with you, so what you going do is have lunch.
      </div>

Answer 1

Very simple solution: just append a space after each word manually:

$('.line_wrap').each(function(){ 
  var words = $(this).text().split(/\s+/);
  var total = words.length;
  $(this).empty();
  for (index = 0; index < total; index ++){
    $(this)
      .append($("<span /> ").text(words[index])) //append span with text
      .append(" ");                              //append space
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <div class="line_wrap">
                    Lorem Khaled Ipsum is a major key to success. They will try to close the door on you, just open it. Watch your back, but more importantly when you get out the shower, dry your back, it’s a cold world out there. The other day the grass was brown, now it’s green because I ain’t give up. Never surrender. Every chance I get, I water the plants, Lion! In life you have to take the trash out, if you have trash in your life, take it out, throw it away, get rid of it, major key. You do know, you do know that they don’t want you to have lunch. I’m keeping it real with you, so what you going do is have lunch.
      </div>

If you prefer the space to be inside the span, then you can add it there:

$('.line_wrap').each(function(){ 
  var words = $(this).text().split(/\s+/);
  var total = words.length;
  $(this).empty();
  for (index = 0; index < total; index ++){
    $(this)
      .append($("<span /> ") //append span
        .text(words[index])  //...with text
        .append(" ")         //...and space
      ) 
      
  }
})

span {
  text-decoration: underline;
}
span:nth-child(even) {
  text-decoration-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <div class="line_wrap">
                    Lorem Khaled Ipsum is a major key to success. They will try to close the door on you, just open it. Watch your back, but more importantly when you get out the shower, dry your back, it’s a cold world out there. The other day the grass was brown, now it’s green because I ain’t give up. Never surrender. Every chance I get, I water the plants, Lion! In life you have to take the trash out, if you have trash in your life, take it out, throw it away, get rid of it, major key. You do know, you do know that they don’t want you to have lunch. I’m keeping it real with you, so what you going do is have lunch.
      </div>

You can also choose to split by spaces but still keep them in:

$('.line_wrap').each(function(){ 
  //keep the separator when splitting by using a zero-width pattern
  var words = $(this).text().split(/\b(?=\s+)\b/);
  var total = words.length;
  $(this).empty();
  for (index = 0; index < total; index ++){
    $(this).append($("<span /> ").text(words[index]))
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <div class="line_wrap">
                    Lorem Khaled Ipsum is a major key to success. They will try to close the door on you, just open it. Watch your back, but more importantly when you get out the shower, dry your back, it’s a cold world out there. The other day the grass was brown, now it’s green because I ain’t give up. Never surrender. Every chance I get, I water the plants, Lion! In life you have to take the trash out, if you have trash in your life, take it out, throw it away, get rid of it, major key. You do know, you do know that they don’t want you to have lunch. I’m keeping it real with you, so what you going do is have lunch.
      </div>

Finally, another thing you can do is separate the string into spaces and non-space groups, so "Lorem Khaled Ipsum" becomes ["Lorem", " ", "Khaled", " ", "Ipsum"]. Once you have that, go over and wrap each member into a span. You can have different classes for whitespace and non-whitespace. This will then allow you to treat each type individually, if needed:

$('.line_wrap').each(function(){ 
  //divide into whitespaces and non-whitespaces
  var segments = $(this).text().match(/(\s+)|(\S+)/g);
  
  var total = segments.length;
  $(this).empty();
  
  for (index = 0; index < total; index ++){
    var segment = segments[index];
    //wrap in a span
    var span = $("<span /> ").text(segment);

    //check if current segment is whitespace only
    if (segment.trim() == 0) {
      span.addClass("whitespace");
    } else {
      span.addClass("word")
    }
    
    //append
    span.appendTo($(this));
  }
})

span.word {
  text-decoration: underline;
}
span.whitespace::before {
  content: "[";
}
span.whitespace::after {
  content: "]";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <div class="line_wrap">
                    Lorem Khaled Ipsum is a major key to success. They will try to close the door on you, just open it. Watch your back, but more importantly when you get out the shower, dry your back, it’s a cold world out there. The other day the grass was brown, now it’s green because I ain’t give up. Never surrender. Every chance I get, I water the plants, Lion! In life you have to take the trash out, if you have trash in your life, take it out, throw it away, get rid of it, major key. You do know, you do know that they don’t want you to have lunch. I’m keeping it real with you, so what you going do is have lunch.
      </div>

Answer 2

Just append an space: .append(" "). See an example below in your own code:

$('.line_wrap').each(function(){ 
  var words = $(this).text().split(/\s+/);
  var total = words.length;
  $(this).empty();
  for (index = 0; index < total; index ++){
    $(this).append($("<span /> ").text(words[index])).append(" ");
  }
})

<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="line_wrap">
    Lorem Khaled Ipsum is a major key to success. They will try to
    close the door on you, just open it. Watch your back, but more
    importantly when you get out the shower, dry your back, it’s a
    cold world out there. The other day the grass was brown, now it’s
    green because I ain’t give up. Never surrender. Every chance I
    get, I water the plants, Lion! In life you have to take the trash
    out, if you have trash in your life, take it out, throw it away,
    get rid of it, major key. You do know, you do know that they don’t
    want you to have lunch. I’m keeping it real with you, so what you
    going do is have lunch.
</div>