JQuery

Question

我有这个口号 - 每一个大项目都从一小步开始......欢迎您迈出这一步。
现在，我试图在 3 个点（这些点需要可见）之后将这个标语切成两半，因为我需要添加一个 class 以使后半部分更加大胆（对于 font-wheight). 我正在使用这个 jquery 代码，它 非常非常 对站点中的其他标题和口号很有帮助：

  //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);
});

而且我没有成功地在正确的地方拆分，我总是喜欢这个例子 -
每一个大项目都是从一小步开始的……你
欢迎迈出这一步
口号中的 "you" 需要加粗。我错过了什么？或者我需要在我期待的代码中更改什么？或者我如何使用此代码在 48 个字符后 split/slice？

对于你的回复我会非常非常感谢

Answer 1

您可以在正则表达式上拆分您的字符串，该正则表达式搜索被一些空格包围的 ... ，将其放入捕获组中，以便它保留在输出数组中。然后你可以拼接跨度开始标记并在将数组重新加入新的 HTML:

之前推入跨度结束标记

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

JQuery - 在 48 个字符后或 3 个点后拆分口号

JQuery - Split the slogen after 48 characters OR after 3 dots

split

splice