javascript - 如何用另一个元素包装html中的所有文本？

Question

例如：

从

<div>
   whats up!
   <div> whats up2! </div>
   thank you for your help
   <div></div>
</div>

至

<div>
   <span>whats up!</span>
   <div><span> whats up2! </span></div>
   <span>thank you for your help</span>
   <div></div> <!---STAYS THE SAME -->
</div>

我将如何在 jQuery 或纯 JavaScript 中制作这样的东西？

Answer 1

有这个 HTML：

<div id="container" >
   whats up!
   <div> whats up2! </div>
   thank you for your help
</div>​​​

你可以这样做：

var nodes = document.getElementById('container').childNodes;

$(nodes).each(function(ind, el){
    if(el.nodeType == 3)
        $(el).wrap('<span>');
    else
        $(el).wrapInner('<span>');
});

​ 据我所知，你不能用 jQuery 获取文本节点（如果我错了请纠正我），所以你可以用纯 JavaScript 获取它们并使用 jQuery 的方法wrap

http://jsfiddle.net/hyJA6/2/

Answer 2

只是为了完整起见，@davids 提供的解决方案可以扩展为使用更深的层次结构，可以在“纯”jquery 中编写如下

$('#container')
.find('*')
.andSelf()
.contents()
.filter(function() {
    return this.nodeType == 3;
})
.wrap('<span>')

内容如下：获取#container 及其所有正确的 DOM 子项的完整内容，仅保留文本节点 ( nodeType == 3) 并将它们包装在<span>.

请注意，如果应用于大型 DOM 树，这将变得非常慢。