如何在元素中的每个文本部分包裹？

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