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

Question

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

我有这个：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我想要的是什么：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

过滤掉除文本节点之外的所有内容，并将其包装

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

FIDDLE