如何在元素中的每個文本部分上包裹跨度？

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

小提琴