Maison >interface Web >js tutoriel >Comment échapper aux caractères spéciaux HTML en JavaScript ?

Comment échapper aux caractères spéciaux HTML en JavaScript ?

Barbara Streisand
Barbara Streisandoriginal
2024-12-10 10:12:14631parcourir

How to Escape HTML Special Characters in JavaScript?

Échapper aux caractères spéciaux HTML en JavaScript :

Lorsque vous essayez d'afficher du texte sur une page HTML via une fonction JavaScript, vous pouvez rencontrer le défi d'échapper aux caractères spéciaux HTML. Ces caractères, tels que < (inférieur à) et > (supérieur à), peut entraîner des problèmes de rendu inattendus.

Heureusement, JavaScript fournit un moyen efficace de gérer cette tâche :

function escapeHtml(unsafe) {
    return unsafe
        .replace(/&amp;/g, "&amp;amp;")
        .replace(/</g, "&amp;lt;")
        .replace(/>/g, "&amp;gt;")
        .replace(/&quot;/g, "&amp;quot;")
        .replace(/'/g, "&amp;#039;");
}

Par exemple, si vous avez le texte non sécurisé suivant :

<p>I want to display text with special characters like &," and
</p>

Vous pouvez utiliser la fonction escapeHtml pour échapper aux caractères spéciaux :

const escapedText = escapeHtml('<p>I want to display text with special characters like &," and</p>');

Le résultat escapedText sera :

<p>I want to display text with special characters like &amp;,"\ and</p>

Ce texte échappé peut désormais être affiché en toute sécurité sur la page HTML sans aucun problème de rendu.

Pour les navigateurs Web modernes, vous pouvez simplifier le processus d'échappement à l'aide de la commande replaceAll function :

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&amp;', '&amp;amp;').replaceAll('<', '&amp;lt;').replaceAll('>', '&amp;gt;').replaceAll('&quot;', '&amp;quot;').replaceAll("'", '&amp;#039;');
};

En implémentant l'une de ces solutions, vous pouvez efficacement échapper aux caractères spéciaux HTML en JavaScript, garantissant ainsi l'affichage transparent du texte sur votre site Web. pages.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn