如何将 span 环绕在元素中的每个文本部分？

Question

我想在每个尚未被另一个元素包裹的文本部分包裹一个 span 元素。

我有这个：

<p>
  text text text text text text text text <span class="f1">f1 text</span> text text text text text text text text text text text text text <span class="f2">f2 text</span> text text text text text text text
</p>

我想要的：

<p>
  <span>text text text text text text text text</span><span class="f1">f1 text</span>
  <span>text text text text text text text text text text text text text</span><span class="f2">f2 text</span><span> text text text text text text text</span>
</p>

Answer 1

过滤除文本节点以外的所有内容，并将它们换行

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

FIDDLE

如何将 span 环绕在元素中的每个文本部分？

How to wrap span around every text part in an element?

javascript

jquery

text

word-wrap