Rimuovi tag intorno a un nodo di testo utilizzando JavaScript

Question

Se ho qualche HTML che assomiglia a questo:

<div id="text"> 
     This is some text that is being written <span class="highlight">with 
     a highlighted section</span> and some text following it. 
</div> 

E voglio rimuovere il "span" lasciando il nodo di testo all'interno, come dovrei andare a fare che ? Ho provato ad utilizzare jQuery per effettuare le seguenti operazioni:

wrap = $('.highlight'); 
wrap.children().insertBefore(wrap); 
wrap.remove(); 

Ma questo non funziona sto cercando di indovinare perché i bambini restituisce un insieme vuoto poiché c'è solo un nodo di testo in là. Quindi tutto ciò che accade è che lo span e il suo contenuto vengono rimossi.

Sono anche aperto a alternative al mio approccio qui. Quello che sta succedendo è che il mio codice crea effettivamente quell'intervallo quando un utente seleziona un blocco di testo. Incapsula il testo selezionato in un intervallo per differenziarlo visivamente. Ho bisogno di rimuovere lo span dopo, a causa di alcune stranezze nel modo in cui funziona l'oggetto range di mozilla.

EDIT: Non voglio sostituire l'intero contenuto di "#text" in quanto potrebbe essere molto grande.

Answer 1

Si ottiene il testo, e sostituire l'arco con esso:

var wrap = $('.highlight'); 
var text = wrap.text(); 
wrap.replaceWith(text); 

Answer 2

text.replace (/ < /? [^>] + (> | $)/G, "");

Answer 3

Questo funziona:

wrap = $('.highlight'); 
wrap.before(wrap.text()); 
wrap.remove(); 

Answer 4

questo farà quello che vuoi, e anche preservare eventuali tag nell'arco EVIDENZA .

content = $(".highlight").contents(); 
$(".highlight").replaceWith(content); 

Answer 5

sarebbe molto più semplice cambiare semplicemente la classe dello span piuttosto che rimuoverlo effettivamente. È possibile utilizzare puro javascript: funzione toggleClass

document.getElementById("span id").className=""; 

O di jQuery:

$("element").toggleClass("highlight"); 

Inoltre, le migliori pratiche dicono che non si dovrebbe usare nomi di classe che implicano uno stile, come il punto culminante. Prova invece "enfatizzato". : D

Answer 6

avvolgerlo in un plugin

(function($) { 
    $.fn.tagRemover = function() {   
     return this.each(function() {    
     var $this = $(this); 
     var text = $this.text(); 
     $this.replaceWith(text);    
     });    
    }  
})(jQuery); 

e quindi utilizzare in questo modo

$('div span').tagRemover(); 

Working Demo qui - aggiungere /modificare all'URL di giocare con il codice

Answer 7

Un plug-in di scappamento migliore:

$.fn.unwrap = function() { 
    this.parent(':not(body)') 
    .each(function(){ 
     $(this).replaceWith(this.childNodes); 
    }); 

    return this; 
}; 

da Ben Alman

Answer 8

element = document.getElementById("span id"); 
element.parentNode.insertBefore(element.firstChild, element); 
element.parentNode.removeChild(element);