JS - Eliminar una etiqueta sin eliminar el contenido

Question

Me pregunto si es posible eliminar una etiqueta, pero dejar el contenido en contacto? Por ejemplo, ¿es posible eliminar la etiqueta SPAN pero dejar allí el contenido de SPAN?

<p>The weather is sure <span>sunny</span> today</p> //original 

<p>The weather is sure sunny today</p> //turn it into this 

He intentado usar this método de uso de sustituir con(), pero resultó el HTML en

<p> 
    "The weather is sure " 
    "sunny" 
    " today" 
</p> 

EDIT: Después de probar todas sus respuestas, me di cuenta de que mi código es el culpable . La razón por la que sigo recibiendo tres nodos de texto dividido se debe a la inserción de la etiqueta SPAN. Crearé otra pregunta para intentar solucionar mi problema.

Answer 1

jQuery tiene formas más sencillas:

var spans = $('span'); 
spans.contents().unwrap(); 

Con diferentes métodos selector, es posible para eliminar los tramos profundamente anidados o simplemente para dirigir los tramos de los niños de un elemento.

Answer 2

Son solo tres nodos de texto en lugar de uno. No hace una diferencia visible, ¿verdad?

Si es un problema, utilice el método DOM normalize combinarlos:

$(...)[0].normalize(); 

Answer 3

$(function(){ 

    var newLbl=$("p").clone().find("span").remove().end().html(); 
    alert(newLbl); 

});​ 

Ejemplo: http://jsfiddle.net/7gWdM/6/

Answer 4

Hay varias maneras de hacerlo. Jquery es la manera más fácil:

//grab and store inner span html 
var content = $('p span').html; 
//"Re"set inner p html 
$('p').html(content); 

Javascript puede hacer lo mismo utilizando element.replace. (No recuerdo la expresión regular para hacer la sustitución de un solo golpe, pero esta es la manera fácil)

paragraphElement.replace("<span>", ""); 
paragraphElement.replace("</span>", ""); 

Answer 5

<p>The weather is sure <span>sunny</span> today</p>; 


var span=document.getElementsByTagName('span')[0]; // get the span 
var pa=span.parentNode; 
while(span.firstChild) pa.insertBefore(span.firstChild, span); 

pa.removeChild(span); 

Answer 6

Si no está buscando una solución jQuery, aquí algo que es un poco más ligero y se centró en su situación.

Creé una función llamada getText() y la usé recursivamente. En resumen, puede obtener los nodos secundarios de su elemento p y recuperar todos los nodos de texto dentro de ese nodo p.

Casi todo en el DOM es un nodo de algún tipo. Mirando los siguientes enlaces encontré que los nodos de texto tienen un valor numérico nodeType de 3, y cuando identifica dónde están sus nodos de texto, obtiene su nodeValue y lo devuelve para concatenarlo a todo el nodo sin texto libre valor.

https://developer.mozilla.org/en/nodeType

https://developer.mozilla.org/En/DOM/Node.nodeValue

var para = document.getElementById('p1') // get your paragraphe 
var texttext = getText(para);    // pass the paragraph to the function 
para.innerHTML = texttext     // set the paragraph with the new text 

function getText(pNode) { 

    if (pNode.nodeType == 3) return pNode.nodeValue; 

    var pNodes = pNode.childNodes  // get the child nodes of the passed element 
    var nLen = pNodes.length    // count how many there are 
    var text = ""; 

    for (var idx=0; idx < nLen; idx++) { // loop through the child nodes 
     if (pNodes[idx].nodeType != 3) { // if the child not isn't a text node 
      text += getText(pNodes[idx]); // pass it to the function again and 
              // concatenate it's value to your text string 
     } else { 
      text += pNodes[idx].nodeValue // otherwise concatenate the value of the text 
              // to the entire text 
     } 

    } 

    return text 
} 

no he probado esto para todos los escenarios, pero va a hacer por lo que estás haciendo en este momento. Es un poco más complejo que una cadena de reemplazo ya que está buscando el nodo de texto y no la codificación rígida para eliminar etiquetas específicas.

Buena suerte.

Answer 7

Si alguien todavía está buscando eso, la solución completa que ha trabajado para mí es:

Suponiendo que tenemos:

<p>hello this is the <span class="highlight">text to unwrap</span></p> 

el js es:

// get the parent 
var parentElem = $(".highlight").parent(); 

// replacing with the same contents 
$(".highlight").replaceWith( 
    function() { 
     return $(this).contents(); 
    } 
); 

// normalize parent to strip extra text nodes 
parentElem.each(function(element,index){ 
    $(this)[0].normalize(); 
});