如何防止replaceWith生成多个文本节点？

Question

我有这段HT​​ML代码：

<p><span>h</span><span>o</span><span>l</span><span>a</span></p>

我正在使用jQuery替换所有跨度：

$('p span').each(function(){
   $(this).replaceWith($(this).text());     
});

当我查看我的DOM时，我看到脚本为每个字母1创建了 4个文本节点。 如何防止这种情况发生？我只想要 1 文字节点！

注意：给出的示例非常简单。 我其实是这样做的：

<p>This is an <b>example</b>: <span>h</span><span>o</span><span>l</span><span>a</span>!</p>

那应该是这样的：

<p>{text}This is an {/text}<b>{text}example{/text}</b>{text}: hola!{/text}</p>

{text}是一个DOM文本节点： - ）

Answer 1

最后，您可以做的一件事就是调用原生的normalize()方法：

$('p').find('span').each(function(){
   $(this).replaceWith($(this).text());     
}).end()[0].normalize();

编辑：我以前使用parent()^(docs)从<span>元素遍历，但是它们已从DOM中删除，因此它们不再拥有父级。< / p>

现在我首先选择<p>，然后选择find()^(docs) <span>元素。这样我就可以使用end()^(docs)返回<p>，并致电.normalize()。

如果有多个<p>元素，则需要再进行一次循环。

$('p').find('span').each(function(){
   $(this).replaceWith($(this).text());     
}).end().each(function() {
    this.normalize();
});

---

您还可以将函数作为参数传递给replaceWith()^(docs)，它返回每个元素的文本。

$('p').find('span').replaceWith(function(i,el){ 
    return $.text([this]);
}).end().each(function() {
    this.normalize();
});

Answer 2

也许你真的想要这个？

$('p').text(function (i, txt) {
    return txt;
});

行动中：http://jsfiddle.net/2qNGY/