如果未包装，则JQuery将字符串的每个单词包装在span中答案

【问题标题】：JQuery wrap each word of string in span if it is not wrapped如果未包装，则JQuery将字符串的每个单词包装在span中
【发布时间】：2020-01-29 08:07:24
【问题描述】：

我有一个字符串

<div id="title">Lorem <span class="bold">ipsum</span> dolor sit amet</div>

我想用 span 将每个未包装的单词包装在 #title 容器中。结果必须是：

<div id="title"><span>Lorem </span><span class="bold">ipsum</span><span> dolor</span><span> sit</span><span> amet</span></div>

我尝试过但没有正常工作 - 将第一个单词换行，但在同一 <span> 中显示最后三个单词：

$('#title')
        .contents()
        .filter(function() {
            return this.nodeType === 3;
        })
        .wrap( "<span></span>" );

【问题讨论】：

标签： javascript jquery

【解决方案1】：

由于最后三个单词是单个文本节点的内容，因此您不能这样做，而是必须拆分和包装内容。您可以使用replaceWith() 方法并返回一个HTML 内容数组。

$('#title')
  .contents()
  .filter(function() {
    return this.nodeType === 3;
  }).replaceWith(function() {
    return this.nodeValue.split(/(?=\b\s)/).map(str => `<span>${str}</span>`)
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="title">Lorem <span class="bold">ipsum</span> dolor sit amet</div>

【讨论】：