Elimine una etiqueta HTML pero mantenga el innerHtml

Tengo un HTML simple que necesito para eliminar el formato simple.

A nice house was found in <b>Toronto</b>.

Necesito eliminar el negrita, pero dejar la oración intacta.

¿Cómo es esto posible en jQuery?

$('b').contents().unwrap();

Esto selecciona todos los <b>elementos, luego se usa.contents() para apuntar al contenido de texto del <b>, luego.unwrap() para eliminar su <b>elemento padre .

Para el mejor rendimiento, siempre vuélvete 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 está desenvolviendo muchos elementos, ya que cualquiera de los enfoques anteriores es significativamente más rápido que el costo .unwrap().

La forma más simple 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

jsFiddle Demo

¿Qué tal esto?

$("b").insertAdjacentHTML("afterend",$("b").innerHTML);
$("b").parentNode.removeChild($("b"));

La primera línea copia el contenido HTML de la betiqueta en la ubicación directamente después de la betiqueta, y luego la segunda línea elimina la betiqueta del DOM, dejando solo el contenido copiado.

Normalmente envuelvo esto en una función para que sea más fácil de usar:

function removeElementTags(element) {
   element.insertAdjacentHTML("afterend",element.innerHTML);
   element.parentNode.removeChild(element);
}

Todo el código es en realidad Javascript puro, el único JQuery que se usa es que se selecciona el elemento al objetivo (la betiqueta en el primer ejemplo). La función es puramente JS: D

Mira también:

• https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdarestHTML

// For MSIE:
el.removeNode(false);

// Old js, w/o loops, using DocumentFragment:
function replaceWithContents (el) {
  if (el.parentElement) {
    if (el.childNodes.length) {
      var range = document.createRange();
      range.selectNodeContents(el);
      el.parentNode.replaceChild(range.extractContents(), el);
    } else {
      el.parentNode.removeChild(el);
    }
  }
}

// Modern es:
const replaceWithContents = (el) => {
  el.replaceWith(...el.childNodes);
};

// or just:
el.replaceWith(...el.childNodes);

// Today (2018) destructuring assignment works a little slower
// Modern es, using DocumentFragment.
// It may be faster than using ...rest
const replaceWithContents = (el) => {
  if (el.parentElement) {
    if (el.childNodes.length) {
      const range = document.createRange();
      range.selectNodeContents(el);
      el.replaceWith(range.extractContents());
    } else {
      el.remove();
    }
  }
};

Otra solución nativa (en café):

el = document.getElementsByTagName 'b'

docFrag = document.createDocumentFragment()
docFrag.appendChild el.firstChild while el.childNodes.length

el.parentNode.replaceChild docFrag, el

No sé si es más rápido que la solución user113716, pero puede ser más fácil de entender para algunos.

La respuesta más simple es alucinante:

¡ExternalHTML es compatible con Internet Explorer 4!

Aquí es para hacerlo con JavaScript incluso sin jQuery

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 principales navegadores, incluido el antiguo IE. en el navegador reciente, incluso podemos llamar a Cada uno directamente en la lista de nodos.

function unwrap(selector) {
    document.querySelectorAll('b').forEach( (item,i) => {
        item.outerHTML = item.innerText;
    } )
}