user
En JavaScript, comment convertir les caractères spéciaux en entités HTML ?
alphonsio

La fonction ci-dessous permet d'échapper les caractères HTML en créant un élément temporaire et en encodant le contenu avec les méthodes textContent et innerHTML :

function escapeHTML(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}

Pour échapper les caractères HTML en JavaScript, il faut convertir certains caractères spéciaux en leurs entités HTML. Par exemple, & devient &amp;, < devient &lt;, > devient &gt;, " devient &quot;, et ' devient &#39;. Cela permet d'éviter des problèmes de sécurité, comme les attaques par injection de code HTML ou de script.

Voici les deux méthodes les plus courantes :

1. Utiliser textContent d'un élément DOM

Une autre approche consiste à utiliser un élément DOM pour encoder le texte, en créant un élément temporaire et en manipulant sa propriété textContent.

function escapeHTML(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}

Exemple d'utilisation

const input = '<div class="example">"Hello" & Welcome!</div>';
const escaped = escapeHTML(input);
console.log(escaped); // Affiche: &lt;div class=&quot;example&quot;&gt;&quot;Hello&quot; &amp; Welcome!&lt;/div&gt;

Cette méthode est souvent plus performante et plus concise pour les projets côté navigateur, car elle utilise le navigateur pour gérer les entités HTML.

Exemple en ligne

Voici un exemple en ligne. Vous pouvez modifier le champ pour avoir un aperçu du résultat :

2. Utiliser une fonction de remplacement

Vous pouvez créer une fonction qui utilise replace avec une expression régulière pour remplacer les caractères spéciaux :

function escapeHTML(str) {
    return str.replace(/[&<>"'`=\/]/g, function(match) {
        switch (match) {
            case '&': return '&amp;';
            case '<': return '&lt;';
            case '>': return '&gt;';
            case '"': return '&quot;';
            case "'": return '&#39;';
            case '/': return '&#x2F;';
            case '`': return '&#x60;';
            case '=': return '&#x3D;';
        }
    });
}

Exemple d'utilisation

const input = '<div class="example">"Hello" & Welcome!</div>';
const escaped = escapeHTML(input);
console.log(escaped); // Affiche: &lt;div class=&quot;example&quot;&gt;&quot;Hello&quot; &amp; Welcome!&lt;/div&gt;

Exemple en ligne

Voici un exemple en ligne. Vous pouvez modifier le champ pour avoir un aperçu du résultat :

Cette solution permet de choisir les caractères qui seront échappés.