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

Question

我有这段 html 代码：

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

我在上面使用 jQuery 来替换所有的跨度：

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

当我查看 DOM 时，我看到脚本创建了 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

也许你真的想要这个？

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

实际操作： http://jsfiddle.net/2qNGY/

Answer 2

您可以做的一件事是最后调用本机 normalize()方法：

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

编辑： 我以前使用过 parent( )^(docs) 从 元素向上遍历，但它们已从DOM，所以他们不再有父母。

现在，我首先选择

，然后选择 find()< /code>(docs) 元素。这样我就可以使用 end()(docs) 返回到

，并调用 .normalize()。

如果有多个

元素，您将需要执行另一个循环。

$('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();
});