Supprimer une balise HTML mais garder le innerHtml
J'ai du HTML simple dont j'ai besoin pour dépouiller le formatage simple.
A nice house was found in <b>Toronto</b>.
Je dois supprimer le gras, mais laisser la phrase intacte.
Comment est-ce possible dans jQuery?
6 réponses
$('b').contents().unwrap();
Sélectionne tous les <b> éléments, puis utilise .contents() pour cibler le contenu du texte de la <b>, alors .unwrap() pour supprimer son parent <b> élément.
Pour la plus grande performance, toujours aller 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 toute solution jQuery fournie ici.
Vous pouvez aussi utiliser .replaceWith(), comme ceci:
$("b").replaceWith(function() { return $(this).contents(); });
, Ou si vous savez que c'est juste une chaîne:
$("b").replaceWith(function() { return this.innerHTML; });
Cela peut faire une grande différence si vous êtes de déballage de beaucoup d'éléments, depuis l'approche ci-dessus est nettement plus rapide que le coût de .unwrap().
Le moyen le plus simple de supprimer les éléments html internes et de renvoyer uniquement du texte serait le JQuery .texte fonction () .
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
Et ça?
$("b").insertAdjacentHTML("afterend",$("b").innerHTML);
$("b").parentNode.removeChild($("b"));
La première ligne copie le contenu HTML de la balise b à l'emplacement directement après la balise b, puis la deuxième ligne supprime la balise b du DOM, ne laissant que son contenu copié.
J'enroule 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 du Javascript pur, le seul JQuery utilisé est celui de sélectionner l'élément à cibler (la balise b dans le premier exemple). Le la fonction est juste pure JS: D
Regardez aussi:
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.
// 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();
}
}
};