jquery - 如何在程序生成的跨度中添加空格？

Question

我有将 a 包裹<span>在 a 中的每个单词的代码<div>。我遇到的问题是它没有在每个单词后添加空格，所以它看起来像一个连续的句子。将每个单词包装在 a 中时，有没有办法在每个单词的末尾添加空格<span>？

我的 JS 代码：

$('.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]));
 }
})

工作示例：

$('.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>

标签： jquerytextsplit

Answer 1

非常简单的解决方案：只需在每个单词后手动添加一个空格：

$('.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"]. 一旦你有了它，再把每个成员都包装成一个跨度。空白和非空白可以有不同的类。如果需要，这将允许您单独处理每种类型：

$('.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>