Supprimer une balise HTML mais conserver le innerHtml

J'ai du HTML simple dont j'ai besoin pour supprimer le formatage simple.

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

Je dois supprimer le gras, mais laissez la phrase intacte.

Comment est-ce possible dans jQuery?

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

Ceci sélectionne tous les <b>éléments, puis utilise.contents() pour cibler le contenu textuel de <b>, puis.unwrap() pour supprimer son <b>élément parent .

Pour des performances optimales, utilisez toujours le mode natif:

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 ] );
}

Ce sera beaucoup plus rapide que n'importe quelle solution jQuery fournie ici.

Vous pouvez également utiliser .replaceWith(), comme ceci:

$("b").replaceWith(function() { return $(this).contents(); });

Ou si vous savez que ce n'est qu'une chaîne:

$("b").replaceWith(function() { return this.innerHTML; });

Cela peut faire une grande différence si vous déballez beaucoup d'éléments, car l'une ou l'autre des approches ci-dessus est beaucoup plus rapide que le coût de .unwrap().

Le moyen le plus simple de supprimer les éléments HTML internes et de ne renvoyer que du texte serait la fonction JQuery .text () .

Exemple:

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

Démo jsFiddle

Que dis-tu de ça?

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

La première ligne copie le contenu HTML de la bbalise à l'emplacement directement après la bbalise, puis la deuxième ligne supprime la bbalise du DOM, ne laissant que son contenu copié.

J'emballe normalement ceci dans une fonction pour le rendre plus facile à utiliser:

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

Tout le code est en fait pur Javascript, le seul JQuery utilisé est celui de sélectionner l'élément à cibler (la bbalise dans le premier exemple). La fonction est juste du pur JS: D

Regardez aussi:

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

// 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();
    }
  }
};

Une autre solution native (dans le café):

el = document.getElementsByTagName 'b'

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

el.parentNode.replaceChild docFrag, el

Je ne sais pas si c'est plus rapide que la solution de user113716, mais cela pourrait être plus facile à comprendre pour certains.

La réponse la plus simple est époustouflante:

externalHTML est pris en charge jusqu'à Internet Explorer 4!

Voici pour le faire avec javascript même sans 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')

Cela devrait fonctionner dans tous les principaux navigateurs, y compris l'ancien IE. dans un navigateur récent, nous pouvons même appeler forEach à droite sur la liste de nœuds.

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