如何防止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個文本節點，每個字母一個。 如何防止發生這種情況？我只想要文本節點！

注意：給出的例子非常簡單。 我實際上做它：

<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} :-)

Answer 1

有一兩件事你可以做的是在最後，調用本地normalize()方法：

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

編輯：我以前用parent()^(docs)遍歷了從<span>元素，但他們從DOM中刪除，所以他們不再有父母。

現在我先選擇<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

也許你真的想這樣一個DOM文本節點？

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

在行動：http://jsfiddle.net/2qNGY/