elimina etiqueta de alrededor de un nodo de texto usando javascript

Question

Si tengo algo de HTML que tiene este aspecto:

<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> 

Y quiero quitar el "span" dejando el nodo de texto dentro, ¿cómo voy a ir haciendo que ? Intenté usar jQuery para hacer lo siguiente:

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

Pero eso no funciona supongo porque los niños devuelve un conjunto vacío ya que sólo hay un nodo de texto en ese país. Entonces, todo lo que sucede es que el lapso y su contenido se eliminan.

También estoy abierto a las alternativas a mi enfoque aquí. Lo que sucede es que mi código realmente crea ese lapso cuando un usuario selecciona un bloque de texto. Envuelve el texto seleccionado en un lapso para diferenciarlo visualmente. Sin embargo, necesito eliminar el tramo después debido a algunas peculiaridades con la forma en que funciona el objeto de rango de Mozilla.

EDITAR: No quiero reemplazar todo el contenido de '#text' por cierto, ya que podría ser muy grande.

Answer 1

Se obtiene el texto, y reemplazar el lapso con él:

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

Answer 2

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

Answer 3

Esto funciona:

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

Answer 4

esto va a hacer lo que quiere, y también conservar las etiquetas en el lapso DESTACAR .

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

Answer 5

sería mucho más fácil simplemente cambiar la clase del tramo que quitarlo realmente. Se puede usar puro javascript: función toggleClass

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

O de jQuery:

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

También, las mejores prácticas dicen que no se debe utilizar nombres de clase que impliquen un estilo, como punto culminante. Intenta "enfatizar" en su lugar. : D

Answer 6

envolverlo en un plugin

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

y luego usar como tal

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

Working Demo acá - /editar a la URL para jugar con el código

Answer 7

Un mejor complemento para desenvolver:

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

    return this; 
}; 

de Ben Alman

Answer 8

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