Очень простое решение: просто добавьте пробел после каждого слова вручную:
$('.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>
Если вы предпочитаете, чтобы пространство составляло внутри диапазона, то вы можете добавить его туда:
$('.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>
Вы также можете выбрать разделить на пробелы, но при этом оставить их в :
$('.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>
Наконец, еще одна вещь, которую вы можете сделать, это разделить строку на пробелы и непространственные группы, поэтому «Lorem Khaled Ipsum» становится ["Lorem", " ", "Khaled", " ", "Ipsum"]. Как только вы это сделаете, go закончите и заверните каждого участника в промежуток. Вы можете иметь разные классы для пробелов и не пробелов. Это позволит вам обрабатывать каждый тип индивидуально, если необходимо:
$('.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>