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 &
, <
devient <
, >
devient >
, "
devient "
, et '
devient '
. 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 :
textContent
d'un élément DOMUne 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;
}
const input = '<div class="example">"Hello" & Welcome!</div>';
const escaped = escapeHTML(input);
console.log(escaped); // Affiche: <div class="example">"Hello" & Welcome!</div>
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.
Voici un exemple en ligne. Vous pouvez modifier le champ pour avoir un aperçu du résultat :
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 '&';
case '<': return '<';
case '>': return '>';
case '"': return '"';
case "'": return ''';
case '/': return '/';
case '`': return '`';
case '=': return '=';
}
});
}
const input = '<div class="example">"Hello" & Welcome!</div>';
const escaped = escapeHTML(input);
console.log(escaped); // Affiche: <div class="example">"Hello" & Welcome!</div>
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.