Eliminar una etiqueta HTML pero mantener el HTML interno
Tengo algo de HTML simple que necesito quitarle el formato simple.
A nice house was found in <b>Toronto</b>.
Necesito quitar la negrita, pero dejar la oración intacta.
¿Cómo es esto posible en jQuery?
$('b').contents().unwrap();
Esto selecciona todos <b>los elementos, luego los usa.contents() para apuntar al contenido de texto del <b>y luego.unwrap() para eliminar su <b>elemento principal.
Para obtener el mejor rendimiento, opte siempre por el formato nativo:
var b = document.getElementsByTagName('b');
while(b.length) {
var parent = b[ 0 ].parentNode;
while( b[ 0 ].firstChild ) {
parent.insertBefore( b[ 0 ].firstChild, b[ 0 ] );
}
parent.removeChild( b[ 0 ] );
}
Esto será mucho más rápido que cualquier solución jQuery proporcionada aquí.
También puedes usar .replaceWith(), así:
$("b").replaceWith(function() { return $(this).contents(); });
O si sabes que es solo una cadena:
$("b").replaceWith(function() { return this.innerHTML; });
Esto puede marcar una gran diferencia si desenvuelves muchos elementos, ya que cualquiera de los métodos anteriores es significativamente más rápido que el costo de .unwrap().
La forma más sencilla de eliminar elementos html internos y devolver solo texto sería la función JQuery .text() .
Ejemplo:
var text = $('<p>A nice house was found in <b>Toronto</b></p>');
alert( text.html() );
//Outputs A nice house was found in <b>Toronto</b>
alert( text.text() );
////Outputs A nice house was found in Toronto
Demostración de jsFiddle
He aquí, porque la respuesta más simple es alucinante:
¡ outerHTML es compatible hasta Internet Explorer 4!
Aquí hay que hacerlo con javascript incluso sin jQuery .
element.outerHTML = element.innerHTML
con jQuery
var element = $('b')[0];
element.outerHTML = element.innerHTML;
o sin jQuery
var element = document.querySelector('b');
element.outerHTML = element.innerHTML
Si lo quieres como función:
function unwrap(selector) {
var nodelist = document.querySelectorAll(selector);
Array.prototype.forEach.call(nodelist, function(item,i){
item.outerHTML = item.innerHTML; // or item.innerText if you want to remove all inner html tags
})
}
unwrap('b')
Esto debería funcionar en todos los navegadores principales, incluido el antiguo IE.
Si obtiene NoModificationAllowedError o DOMException , significa que el elemento no tiene padre. Por lo general, obtienes esto cuando intentas esta respuesta creando un nuevo nodo desde la consola de JavaScript sin colocarlo como hijo de otro elemento. Pero no te preocupes y recuerda que cualquier elemento del documento tiene al menos un padre ( <html></html>elemento)
NOTA:
esto reescribe el HTML interno, por lo que si tiene una variable que hace referencia al elemento interno, no apuntará al mismo elemento.
Si necesita mantener la referencia de algunos de los elementos internos en su codificación, puede usar jQuery (respuesta principal) que mueve los elementos a la posición esperada sin reescribir el elemento.
