Comment échapper efficacement aux caractères HTML en JavaScript ?

Comment effectuer un échappement de caractères HTML en JavaScript

Lorsque vous travaillez avec des données HTML en JavaScript, il est souvent nécessaire d'échapper des caractères spéciaux tels que < ;, > et & pour éviter qu'ils soient interprétés comme une syntaxe de balisage. Bien que PHP fournisse une fonction native appelée htmlspecialchars à cet effet, JavaScript n'a pas d'équivalent direct.

Implémentation d'une fonction d'échappement de caractères HTML

Pour émuler la fonctionnalité de htmlspecialchars en JavaScript, vous pouvez créer une fonction personnalisée. Cependant, l'utilisation d'une fonction intégrée est préférable si elle est disponible.

Litéraux de modèle ES6

ES6 a introduit les littéraux de modèle, qui offrent un moyen pratique d'échapper aux caractères HTML. Cependant, cette approche n'échappe qu'à la première occurrence de chaque caractère spécial, ce qui entraîne des résultats incorrects pour les chaînes contenant plusieurs instances du même caractère.

Fonction de remplacement personnalisée

Pour assurer une évasion appropriée, une fonction de remplacement personnalisée peut être utilisée. Cette fonction remplace chaque caractère spécial par son entité HTML correspondante :

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

Utilisation d'une table de caractères

Pour améliorer les performances avec de gros blocs de texte, une table de caractères peut être utilisé pour remplacer les caractères spéciaux plus efficacement :

function escapeHtml(text) {
  var map = {
    '&': '&',
    '<': '&amp;lt;',
    '>': '&amp;gt;',
    '&quot;': '&amp;quot;',
    "'": '&#039;'
  };
  
  return text.replace(/[&amp;<>&quot;']/g, function(m) { return map[m]; });
}

En utilisant ces techniques, vous pouvez efficacement échapper les caractères HTML en JavaScript, garantissant ainsi qu'ils s'affichent correctement en HTML documents.

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!