JQuery - 在48个字符后或3个点后拆分slogen。

Question

我有这个口号 每个大项目都是从一小步开始的......欢迎你迈出这一步。. 现在，我试图将这个口号切成两半，在3个小点之后（这些小点需要可见），因为我需要为第二部分添加一个类，使其更加粗壮（字体高度）。非常非常 有助于别人的标题& 网站的口号。

  //Slogan Little Form 
 $(".short-form-content .slogen p").each(function() {
  var elText,
      openSpan = '<span class="lightTitle">',
      closeSpan = '</span><br/>';
  elText = $(this).text().split(" "); 
  elText.unshift(openSpan);
  elText.splice(8, 0, closeSpan);
  elText = elText.join(" ");     
  $(this).html(elText);
}); 

我没有成功地将其分割到正确的位置，所有的时间，我得到这样的例子 - 每一个大项目都是从一小步开始的......你。不客气 口号中的 "你 "字需要放在粗体的地方。我错过了什么？或我需要改变的代码，它将作为我期待？或我如何分割后48个字符与此代码？

对于你的回答，我将非常非常感激

Answer 1

你可以分割你的字符串上的一个搜索的regex ... 被一些空格所包围，将其放在一个捕获组中，这样它就会被保留在输出数组中。然后，你可以在将数组重新加入新的HTML之前，拼接span开始标签并推送span结束标签。

$(".short-form-content .slogen p").each(function() {
  var elText,
    openSpan = '<span class="lightTitle">',
    closeSpan = '</span><br/>';
  elText = $(this).text().split(/(\s*\.\.\.\s*)/);
  elText.splice(2, 0, openSpan);
  elText.push(closeSpan);
  elText = elText.join('');
  $(this).html(elText);
});

.lightTitle {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="short-form-content">
  <div class="slogen">
    <p>Every big project starts with one small step ... you are welcome to take that step.</p>
  </div>
</div>