Question

例如：

FROM

<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获取文本节点（如果我错了请更正我＆＃39;），所以你可以用纯JavaScript来获取它们并使用jQuery的方法{ {3}}

wrap

Answer 2

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

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

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

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

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

2 个答案: