Как предотвратить замену с помощью нескольких текстовых узлов?

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> 

{текст} является DOM-текстовый узел :-)

Answer 1

Одна вещь, которую вы могли бы сделать, это в конце концов, вызвать родной normalize() метод:

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

EDIT: Я был ранее с помощью 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

Возможно, вы действительно хотите этого?

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

В действии: http://jsfiddle.net/2qNGY/