Les entités HTML sont des espaces réservés pour les caractères spéciaux en HTML. Des caractères comme <, >, &, ", et ' ont des significations spécifiques en HTML et doivent être échappés pour éviter de perturber la structure du document. Lors de la récupération de HTML à partir d’un serveur ou d’une entrée utilisateur, vous avez souvent besoin de décoder ces entités pour les afficher et les manipuler correctement. Cet article explore deux méthodes de décodage des entités HTML à l’aide de JavaScript.
Table des matières
Décodage des entités HTML avec JavaScript natif
JavaScript natif fournit un moyen simple de décoder les entités HTML en utilisant le DOMParser intégré du navigateur. Cette méthode est efficace et ne nécessite aucune bibliothèque externe. Cependant, elle peut ne pas gérer parfaitement toutes les entités, en particulier les entités moins courantes ou personnalisées.
function decodeHTMLEntities(text) {
const doc = new DOMParser().parseFromString(text, 'text/html');
return doc.documentElement.textContent;
}
// Exemple d'utilisation :
const encodedText = '<p>Ceci est un paragraphe avec & dedans.</p>';
const decodedText = decodeHTMLEntities(encodedText);
console.log(decodedText); // Sortie : Ceci est un paragraphe avec & dedans.
Cette fonction analyse la chaîne d’entrée comme du HTML en utilisant DOMParser. La propriété textContent de l’élément racine renvoie ensuite le texte décodé, en supprimant les balises HTML et en remplaçant les entités. Notez que cette méthode supprime également toutes les balises HTML présentes dans l’entrée.
Décodage des entités HTML avec la librairie he
Pour un décodage plus complet, en particulier pour un plus large éventail d’entités, la librairie he est une solution robuste. Elle est légère et facilement disponible via npm ou un CDN.
Installation (npm) :
npm install he
Installation (CDN – jsDelivr) :
<script src="https://cdn.jsdelivr.net/npm/he"></script>
Après l’installation, utilisez la fonction he.decode() :
// En supposant que la librairie 'he' est incluse
const encodedText = '<p>Ceci est un paragraphe avec & et ' dedans.</p>';
const decodedText = he.decode(encodedText);
console.log(decodedText); // Sortie : Ceci est un paragraphe avec & et ' dedans.
he.decode() gère un spectre plus large d’entités, y compris les entités numériques comme ' (apostrophe).
Choisir une méthode
Les deux méthodes décodent efficacement les entités HTML. L’approche JavaScript natif convient aux cas simples et évite les dépendances externes. Pour les scénarios complexes ou un plus large éventail d’entités, la librairie he fournit une solution plus fiable. Assurez-vous toujours de nettoyer les entrées utilisateur pour éviter les vulnérabilités de sécurité.