Maison > Article > interface Web > Comment convertir des caractères spéciaux en HTML en Javascript ?

Comment convertir des caractères spéciaux en HTML en Javascript ?

PHPzavant: 2023-09-03 17:41:02675parcourir

Nous pouvons utiliser la méthode replace() pour convertir les caractères spéciaux en HTML en JavaScript. Cette méthode peut également être appliquée aux cartes. Il existe de nombreuses autres méthodes pour cette tâche. Nous discuterons de ces méthodes en détail dans cet article. Nous discutons d’abord de la nécessité de convertir les caractères spéciaux en HTML, puis nous discuterons des méthodes de conversion des caractères spéciaux. Parlons d’abord de quelques concepts de personnages, puis nous aborderons notre prochain sujet.

Les caractères spéciaux doivent être convertis en HTML

Nous avons vu nos développeurs écrire des milliers de lignes de code pour accomplir des tâches spécifiques. Supposons maintenant que nous devions utiliser le symbole inférieur à () dans une page Web ou une application mobile utilisant HTML comme langage de script. Eh bien, cela devient un problème car le symbole inférieur à () a une signification particulière pour le langage de script HTML.

Ces indicateurs sont généralement utilisés pour initialiser les balises en HTML. De même, l'utilisation du caractère spécial dans une valeur d'attribut peut entraîner une mauvaise interprétation de l'attribut. Ainsi, pour résoudre ce problème, nous avons des codes spéciaux pour chaque caractère spécial présent lors de l’utilisation du HTML. Pour insérer des caractères spéciaux en HTML, commencez par une esperluette (&), puis un signe dièse (#), puis le numéro de code et terminez par un point-virgule (;). Par exemple, le symbole (copyright) peut être représenté par ©.

Comment convertir des caractères spéciaux en HTML

Il existe de nombreuses façons de convertir des caractères spéciaux en HTML. Certaines des méthodes les plus courantes sont répertoriées ci-dessous.

Utilisez la méthode String.prototype.replace()

La méthode String.prototype.replace() en JavaScript est utilisée pour remplacer les caractères spéciaux par une autre valeur dans une chaîne.

String.prototype.replace() a deux paramètres, le premier paramètre est la valeur à remplacer et le deuxième paramètre est la valeur à remplacer dans la chaîne.

Cette méthode renvoie une nouvelle chaîne avec toutes les valeurs de recherche remplacées par les valeurs requises dans la chaîne. Cependant, la méthode String.prototype.replace() ne modifie pas la valeur d'une chaîne existante. Regardons un exemple.

Exemple

<html>
<body>
   <p id="print"></p>
   <script>
      var string = "This is a <string>";
      string = string.replace(/</g, "<");
      document.getElementById("print").innerHTML = string;
   </script>
</body>
</html>

Utilisez String.prototype.replace() avec Map

La méthode

String.prototype.replace() peut également être utilisée avec Map en JavaScript. Ici, String.prototype.replace() a également deux paramètres. Le premier paramètre est le modèle d'expression régulière à remplacer et le deuxième paramètre est la sous-chaîne correspondante.

Exemple

Voyons un exemple d'utilisation de map avec string.prototype.replace() -

<html>
<body>
   <p id="print"></p>
   <script>
      const specialCharsMap = new Map([
         ["<", "<"],
         [">", ">"],
         ["&", "&"],
      ]);
      function replaceSpecialChars(string) {
         for (const [key, value] of specialCharsMap) {
            string = string.replace(new RegExp(key, "g"), value);
         }
         return string;
      }
      document.getElementById("print").innerHTML =
      replaceSpecialChars("This is a <string>");
   </script>
</body>
</html>

Utilisez la fonction encodeURIComponent()

Nous pouvons également utiliser la fonction encodeURIComponent() en javascript pour remplacer les caractères spéciaux par une autre valeur dans une chaîne. Nous utilisons généralement cette fonction pour coder les composants URI (Uniform Resource Identifier). Il remplace les caractères spécifiques d'une chaîne par leurs équivalents échappés pour garantir que la chaîne peut être utilisée en toute sécurité dans les URI.

Maintenant, pour utiliser cette fonction, il suffit de passer une chaîne (str) en paramètre dans la fonction. Cette méthode renvoie également une nouvelle chaîne avec toutes les valeurs de recherche remplacées par les valeurs souhaitées dans la chaîne. Comme la méthode String.prototype.replace(), cette fonction ne modifie pas la valeur d'une chaîne existante. Regardons un exemple.

Exemple

<html>
<body>
   <p id="print"></p>
   <script>
      var str = "Hello, < world > !";
      var newStr = encodeURIComponent(str);
      document.getElementById("print").innerHTML = newStr;
   </script>
</body>
</html>

Lorsque vous utilisez cette fonction, n'oubliez pas qu'elle ne fonctionne qu'avec quelques caractères spéciaux. Pour gérer certains autres caractères spéciaux, vous devez utiliser plusieurs méthodes ou une logique supplémentaire pour les gérer.

Utilisez la fonction escape()

La fonction

escape(), comme la fonction encodeURIComponent(), est utilisée pour encoder une chaîne afin qu'elle ne pose aucun problème avec l'URL du site Web. Pour utiliser cette fonction, nous passons simplement une chaîne (str) comme paramètre dans la fonction. Cette méthode renvoie également une nouvelle chaîne avec toutes les valeurs de recherche remplacées par les valeurs souhaitées dans la chaîne.

Exemple

Ceci est un exemple de fonction escape() -

<html> 
<body>
   <p id="print"></p>
   <script>
      var str = "Hello, <world>!";
      var newStr = escape(str);
      document.getElementById("print").innerHTML = newStr;
   </script>
</body>
</html>

Conclusion

Dans ce blog, nous présentons d'abord les caractères spéciaux, la nécessité de les convertir et les différentes méthodes que vous pouvez utiliser pour ce faire. Certaines des méthodes discutées ici utilisent String.prototype.replace(), String.prototype.replace() avec Map, en utilisant la fonction encodeURIComponent() et la fonction escape(). Les autres méthodes pouvant être utilisées sont innerHTML, replace, document.createElement, etc.

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!

JavaScript 正则表达式 html String 标识符字符串 map prototype innerHTML

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Qu’est-ce que le tremblement d’arbre en JavaScript ?Article suivant：Qu’est-ce que le tremblement d’arbre en JavaScript ?

Articles Liés

Voir plus