我想在段落内用span标记包装每个单词。当段落中没有HTML标记时，我成功地创建了它。但是当段落内有HTML标记时，它就会变得一团糟。
下面是段落中没有HTML标记时的示例：
null
$('div').html(function(i, v) {
return $.trim(v).replace(/(\w+)/g, '<i class="woord">$1</i>');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
11111 22222 33333 44444
</div>null
但是当段落中有HTML标记时，它就会变得乱七八糟，如下所示：
null
$('div').html(function(i, v) {
return $.trim(v).replace(/(\w+)/g, '<i class="woord">$1</i>');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
11111 <span>22222 <small>33333</small></span> 44444
</div>null
谢谢DrunkenPoney的努力。他做的最多，但它已经打破了内部跨度的内容。
我希望结果是这样的，浏览器中出现的每个单词都用包装起来，如下所示：
<div>
<i>June</i> <span><i>10</i> <i>sssssss</i></span> <i>ggdgfdf</i>
</div>
他的代码结果破坏了原来的span代码结构，如下所示：
<div>
<i class="woord">11111</i> <i class="woord"><span>22222</span></i> <i class="woord"><small>33333</small></i> <i class="woord">44444</i>
</div>
确实，您需要遍历所有文本节点。在每个文本节点中，您只需用您想要的字符串替换所有单词即可。所以这是相当清楚的想法。注意，不推荐使用Regex对HTML标记进行搜索/替换。这就是我们需要处理原始文本节点的原因。
同样为了帮助使用jQuery方便地完成这一操作，我们使用replacewith方法就地用Regex替换返回的all替换文本节点。
下面是详细代码：
var wrapHtml = function(textNode){
return $(textNode).replaceWith(
textNode.nodeValue
.replace(/\w+/g,"<i class='woord'>$&</i>"));
};
$("div").contents().each(function(i,e){
if(e.nodeType == 1){
var elems = [];
elems.push(e);
while(elems.length > 0){
var ce = elems.pop();
if(ce.nodeType == 1) {
$(ce).contents().each(function(j,o){
if(o.nodeType == 1) {
elems.push(o);
} else {
wrapHtml(o);
}
});
} else {
wrapHtml(ce);
}
}
} else {
wrapHtml(e);
}
});
演示。
