Comment décoder les entités HTML à l'aide de JavaScript

HTML stocke ses caractères réservés en tant qu'entités de caractères. Les entités de caractères sont des chaînes de texte simples qui commencent par et se terminent par a;. Les entités HTML sont nécessaires car si vous essayez d'écrire les caractères spéciaux de HTML comme un texte simple, HTML devrait être en mesure de les stocker pour qu'ils ne soient pas interprétés comme du code HTML. Des entités HTML sont nécessaires pour une visualisation appropriée du rendu du texte sur les pages Web. Les entités peuvent également être utilisées lorsque vous essayez d'écrire des caractères qui ne sont généralement pas trouvés sur les claviers standard.

Décodage des entités HTML

Les entités HTML peuvent être décodées en utilisant plusieurs méthodes différentes impliquant des bibliothèques JavaScript de vanille ou JavaScript. Ce guide ne passera que par les méthodes JavaScript Vanilla pour décoder les entités HTML car elles sont faciles et simples.

Décodage des entités HTML avec l'élément DOM

La première méthode consiste à utiliser l'élément TextArea. Comme son nom l'indique, l'élément TextArea est utilisé pour créer une zone de texte simple où chaque caractère est interprété comme un texte brut simple.:

Fonction Decode (str)
LET TXT = Document.CreateElement ("TextArea");
SMS.innerhtml = str;
retourner txt.valeur;

Dans le code ci-dessus, nous avons d'abord créé l'élément TextArea à l'aide du document.Méthode CreateElement (). Ensuite, nous avons écrit la chaîne contenant des entités HTML à l'intérieur de la TextArea en utilisant une propriété innerhtml. De cette façon, la chaîne sera convertie en texte simple et les entités seront converties en caractères. Enfin, nous avons renvoyé la chaîne stockée à l'intérieur de la variable txt qui est la TextArea.

Maintenant, si nous appelons la fonction Decode avec une entité HTML en tant que paramètre, il le renverra en tant que texte simple:

Laissez encodéstraux = "

"
Soit DecodedStr = Decode (codéStraS);
console.log (DecodedStr);

Décodage des entités HTML avec le Dompaser.méthode parsofromstring ()

La deuxième méthode consiste à utiliser le DOMPARSER.méthode parsofromstring (). Le Dompaser.La méthode parsefromString () prend une chaîne contenant HTML et la renvoie comme un élément HTML:

Fonction Decode (str)
LET TXT = NOUVEAU DOMPARSER ().parsefromString (str, "text / html");
retourner txt.document de document.TextContent;

Dans le code ci-dessus, nous avons d'abord passé la chaîne comme argument au Dompaser.PARSEFROMSTRING () et l'a récupéré en tant qu'élément HTML en spécifiant le deuxième argument comme «texte / html». Nous avons ensuite renvoyé le contenu texte de l'élément HTML nouvellement créé.

Appelez maintenant la fonction Decode ():

Laissez encodéstraux = "

"
Soit DecodedStr = Decode (codéStraS);
console.log (DecodedStr);

Conclusion

Les entités HTML sont nécessaires pour une visualisation appropriée du texte sur les pages Web. Certains sites Web contiennent des extraits de code en tant que texte simple. Sans entités, il serait difficile de différencier ce qui est un code HTML pour la page Web et ce qui est tout simplement du texte.