Décoder les entités HTML en utilisant JavaScript

1. Décoder les entités HTML à l’aide de JavaScript Vanilla
2. Décoder les entités HTML à l’aide de la bibliothèque he

Les entités HTML sont un ensemble de codes de caractères utilisés pour représenter les caractères réservés par HTML. Il commence par une esperluette & et se termine par un point-virgule ;. Cette image vous fournit une liste de codes de caractères HTML avec leur nom d’entité respectif.

Cet article examinera comment décoder la chaîne ci-dessous à l’aide de JavaScript. Cette chaîne contient divers caractères comme a, b, c et des entités de caractères HTML comme &nbps;, <, ', etc.

var str = 'Give&nbsp;us some&#39;<h2>time</h2>&#39; &amp; space <br> Please';

La chaîne entière est stockée dans la variable str. Il existe deux façons de décoder les entités HTML. L’une consiste à utiliser du JavaScript vanille et l’autre à utiliser une bibliothèque externe.

La bibliothèque externe que nous allons utiliser est la bibliothèque he. C’est l’une des bibliothèques les plus couramment utilisées pour encoder et décoder des entités HTML.

Décoder les entités HTML à l’aide de JavaScript Vanilla

L’un des moyens les plus simples de décoder des entités HTML consiste à utiliser du JavaScript vanille. La balise utilisée pour y parvenir est la textarea.

Tout d’abord, nous allons créer une fonction appelée decodeEntity(), qui prend une chaîne en entrée. Nous passerons la variable str à cette fonction en argument.

A l’intérieur de cette fonction, nous allons d’abord créer un élément textarea en utilisant document.createElement() puis stocker la référence de cette variable dans la variable textarea.

function decodeEntity(inputStr) {
  var textarea = document.createElement('textarea');
  textarea.innerHTML = inputStr;
  return textarea.value;
}
console.log(decodeEntity(str));

Production :

var str = "Give&nbsp;us some&#39;<h2>time</h2>&#39; &amp; space <br> Please";
var he = require('he');
console.log(he.decode(str));

Nous allons stocker la chaîne str à l’intérieur du textarea en utilisant la propriété innerHTML. Le navigateur reconvertit automatiquement le str dans son format HTML approprié à cette étape. Toutes les entités HTML seront décodées et toutes les balises HTML seront conservées.

Enfin, à l’aide de textarea.value, nous renverrons la valeur de la chaîne décodée.

Décoder les entités HTML à l’aide de la bibliothèque he

Le he est une bibliothèque externe permettant d’encoder et de décoder des entités HTML écrites en JavaScript. Cette bibliothèque peut facilement être téléchargée en exécutant la commande ci-dessous. Le node.js (toute version) doit être installé sur votre système pour que la commande ci-dessous s’exécute avec succès.

Pour en savoir plus sur la bibliothèque he, visitez ce lien.

npm install he

Après avoir installé la bibliothèque he, nous pouvons ensuite importer cette bibliothèque dans notre fichier JavaScript à l’aide de la fonction require et transmettre le nom de la bibliothèque, he, sous forme de chaîne à cette fonction.

Ensuite, nous stockerons la référence de celui-ci dans une variable appelée he. Vous pouvez utiliser n’importe quel nom pour représenter cette variable.

var str = 'Give&nbsp;us some&#39;<h2>time</h2>&#39; &amp; space <br> Please';
var he = require('he');
he.decode(str);

La bibliothèque he possède une fonction appelée decode() qui prend deux paramètres html et options.

Le paramètre html est une chaîne constituée d’entités HTML encodées et dont la transmission est obligatoire. Le paramètre options est facultatif et il prend deux valeurs isAttributeValue et strict. Nous n’avons pas besoin de ce deuxième paramètre, nous ne l’utiliserons donc pas.

Nous passerons la variable str mentionnée ci-dessus à la fonction he.decode(), et la sortie résultante sera la suivante.

Give us some '<h2>time</h2>'&space<br>Please

Il est facile de décoder des entités HTML à l’aide d’une bibliothèque JavaScript externe.