J'ai du HTML simple que je dois dépouiller d'un formatage simple.
A nice house was found in <b>Toronto</b>.Je dois enlever le gras, mais laisser la phrase intacte.
Comment cela est-il possible dans jQuery ?
$('b').contents().unwrap();Cela sélectionne tous les <b> éléments, alors utilise .contents() pour cibler le contenu textuel du <b> , puis .unwrap() pour supprimer son parent <b> élément.
Pour obtenir les meilleures performances, il faut toujours opter pour 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 toute solution jQuery fournie ici.
+1 J'étais assis là à écrire une réponse presque identique concernant unwrap() et je n'arrivais pas à me rappeler comment obtenir la partie texte, j'avais oublié .contents() - excellent.
Bien que cela fonctionne, c'est aussi assez lent comparé à .replacewith() à cause de la traversée supplémentaire du DOM... si c'est une <b> avec seulement du HTML, cela devient encore plus rapide.
De même, si vous souhaitez simplement dérouler un span ou une balise de police spécifique, vous pouvez procéder comme suit : $(".className font").contents().unwrap() ;
Vous pouvez également 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 déballez beaucoup d'éléments, puisque l'une ou l'autre des approches ci-dessus est sensiblement plus rapide que le coût de .unwrap() .
Nick, j'aime beaucoup ta réponse aussi. J'ai choisi l'autre parce que la quantité de tags/texte que j'utiliserai dans mon application iPad (données locales) est faible et que les performances ne sont pas trop importantes. La réponse de Partick est un peu plus simple à gérer pour moi. Je coupe les cheveux en quatre pour deux excellentes solutions, mais je ne pouvais en donner qu'une seule à vérifier.
@BahaiResearch.com - Si la performance n'est pas un problème, il faut absolument faire simple... Je fournis juste cette information pour ceux qui la découvrent plus tard et qui pourraient être concernés :)
J'ai essayé d'utiliser cet exemple avec une zone de texte, mais je n'y arrivais pas parce que le contenu de la zone était constitué de balises html qui devaient être évaluées et pas seulement affichées comme du texte. J'ai fini par utiliser : $('textarea').replaceWith(function(){return $(this).val();}) ;
La manière la plus simple de supprimer les éléments html internes et de ne renvoyer que du texte serait la suivante Fonction 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
Regardez, car la réponse la plus simple est époustouflante :
Voici comment le faire avec javascript même sans jQuery
element.outerHTML = element.innerHTMLavec jQuery
var element = $('b')[0];
element.outerHTML = element.innerHTML;ou sans jQuery
var element = document.querySelector('b');
element.outerHTML = element.innerHTMLSi vous le voulez comme une fonction :
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.
Si vous obtenez NoModificationAllowedError o DOMException cela signifie que l'élément n'a pas de parent. Habituellement, vous obtenez ce résultat lorsque vous essayez de répondre en créant un nouveau nœud à partir de la console javascript sans le placer comme enfant d'un autre élément. Mais ne vous inquiétez pas et rappelez-vous que tout élément dans le document a au moins un parent ( <html></html> élément)
NOTE :
cela réécrit le innerHTML, de sorte que si vous avez une variable faisant référence à l'élément interne, elle ne pointera pas sur le même élément.
Si vous devez conserver la référence de certains éléments internes dans votre codage, vous pouvez utiliser jQuery (première réponse) qui déplace les éléments à la position attendue sans réécrire l'élément.
Que pensez-vous de ça ?
$("b").insertAdjacentHTML("afterend",$("b").innerHTML);
$("b").parentNode.removeChild($("b"));La première ligne copie le contenu HTML de la page b à l'emplacement situé directement après la balise b puis la deuxième ligne supprime la balise b du DOM, ne laissant que son contenu copié.
Normalement, j'intègre cette fonction pour en faciliter l'utilisation :
function removeElementTags(element) {
element.insertAdjacentHTML("afterend",element.innerHTML);
element.parentNode.removeChild(element);
}L'ensemble du code est en fait du pur Javascript, le seul JQuery utilisé est celui qui permet de sélectionner l'élément à cibler (la balise b dans le premier exemple). La fonction est juste du pur JS :D
Regardez aussi :
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
