Échapper les caractères spéciaux en JavaScript

Introduction

En JavaScript, l'échappement des caractères spéciaux est une compétence fondamentale pour les développeurs, qui permet de créer des chaînes contenant des caractères qui seraient autrement interprétés différemment par le processeur du langage. Cet article explore en profondeur les méthodes et l'importance de l'échappement des caractères spéciaux, en fournissant aux développeurs les connaissances et les outils nécessaires pour gérer efficacement des chaînes complexes.

Comprendre les caractères spéciaux

Un caractère spécial est tout caractère que l'analyseur JavaScript interpréterait autrement comme faisant partie de la syntaxe plutôt que comme du texte littéral. Les plus importants se répartissent en deux groupes :

• Délimiteurs de string — les guillemets ', ", et ` qui marquent le début et la fin d'une string.
• Séquences d'échappement — des combinaisons commençant par un antislash (\) qui représentent des caractères difficiles à saisir ou invisibles, comme un saut de ligne ou une tabulation.

Si vous placez un guillemet fermant à l'intérieur d'une string du même type, l'analyseur pense que la string s'est terminée prématurément et le reste de la ligne devient une erreur de syntaxe. L'échappement résout ce problème.

Séquences d'échappement courantes

Ces séquences avec antislash sont reconnues à l'intérieur des littéraux de string JavaScript :

Tout caractère qui ne commence pas une séquence d'échappement reconnue supprime simplement l'antislash : '\q' n'est que 'q'.

Comment échapper les caractères spéciaux dans les strings

Pour inclure un caractère spécial sans déclencher sa signification, faites-le précéder d'un antislash (\). Cela indique à JavaScript de traiter le caractère suivant comme du texte littéral.

La règle essentielle pour les guillemets : vous n'avez besoin d'échapper que le guillemet qui correspond au délimiteur de votre string. Une string entre guillemets simples peut contenir des guillemets doubles sans échappement, et inversement.

Exemple : échapper les guillemets

Dans la première string, les antislashs échappent les guillemets simples afin qu'ils fassent partie du texte plutôt que de terminer la string. La deuxième string évite entièrement l'échappement en utilisant un délimiteur différent.

Éviter les échappements avec les littéraux de gabarit

JavaScript moderne prend également en charge les littéraux de gabarit (accents graves), qui permettent d'intégrer à la fois ' et " sans échappement, de s'étendre sur plusieurs lignes et d'interpoler des expressions avec ${...}. À l'intérieur d'un littéral de gabarit, vous n'avez besoin d'échapper que les accents graves et ${.

Cela affiche deux lignes, avec les deux styles de guillemets intacts, sans aucun antislash requis.

L'échappement dans les expressions régulières

Les expressions régulières utilisent également des caractères spéciaux, et les échapper est crucial pour la correspondance de motifs. Les métacaractères tels que . (n'importe quel caractère), * (répétition), +, ?, (, ), [, ], {, }, ^, $, | et \ ont des significations spéciales ; pour les faire correspondre littéralement, vous devez les échapper avec un antislash.

Un antislash joue deux rôles différents dans une regex :

• Il échappe un métacaractère pour qu'il corresponde littéralement — \. correspond à un vrai point.
• Il introduit un raccourci de classe de caractères — \d correspond à un chiffre, \w à un caractère de mot, \s à un espace blanc. Ici l'antislash fait partie d'un jeton, il n'échappe pas une lettre.

Exemple : faire correspondre un point littéral

Notez que les règles d'échappement des strings et les règles d'échappement des regex sont indépendantes. Dans les strings, les antislashs échappent les guillemets et produisent des caractères de contrôle ; dans les regex, ils échappent les métacaractères ou forment des raccourcis comme \d.

L'échappement des caractères est particulièrement utile dans :

• Le développement web : s'assurer que les entrées utilisateur ne cassent pas le code.
• L'analyse de données : traiter correctement les fichiers de données contenant des caractères spéciaux.

Exemple : échapper les entrées utilisateur

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Sanitize Input Example</title>
        <script>
            function sanitizeInput(input) {
              // This function replaces less-than and greater-than characters with HTML entities
              // to prevent malicious scripts from executing when the input is rendered as HTML.
              const sanitized = input.replace(/</g, '&lt;').replace(/>/g, '&gt;');
              return sanitized;
            }
            function displaySanitizedInput() {
              const unsafeInput = document.getElementById('unsafeInput').value;
              const sanitized = sanitizeInput(unsafeInput);
              document.getElementById('output').textContent = sanitized;
            }
        </script>
    </head>
    <body>
        <h1>Input Sanitization Example</h1>
        <p>
            Enter any HTML content below, including potentially harmful scripts.
            The example will sanitize the input to prevent script execution,
            displaying how it would be rendered safely on a web page.
        </p>
        <label for="unsafeInput">Enter unsafe content:</label>
        <input
            type="text"
            id="unsafeInput"
            value="<script>alert('hack')</script>"
        />
        <button onclick="displaySanitizedInput()">Sanitize and Display</button>
        <p>
            <span style="color:gray">Sanitized Output:</span>
            <span id="output"></span>
        </p>
    </body>
</html>

Cet exemple HTML fournit un champ de saisie dans lequel les utilisateurs peuvent entrer du contenu potentiellement non sécurisé, comme une balise <script>. Lorsque l'utilisateur clique sur le bouton, la fonction JavaScript sanitizeInput est appelée, qui assainit l'entrée et met à jour le contenu textuel d'un élément <span> pour afficher le résultat assaini. Notez que cet exemple n'échappe que < et >. En production, vous devriez également échapper les guillemets (" et ') et utiliser une bibliothèque d'assainissement dédiée pour prévenir les vulnérabilités dans les contextes d'attributs.

Laisser le langage s'occuper de l'échappement

La plupart des échappements dans le monde réel devraient être effectués par des outils intégrés plutôt que manuellement, ce qui évite des erreurs subtiles :

• JSON : JSON.stringify() échappe automatiquement les guillemets, les antislashs et les caractères de contrôle, et JSON.parse() effectue l'opération inverse. Voir Travailler avec JSON.
• URL : encodeURIComponent() échappe les caractères non sécurisés dans une chaîne de requête.
• Regex à partir d'une entrée utilisateur : échappez chaque métacaractère avant de construire un motif.

Exemple : échappement intégré

Bonnes pratiques pour l'échappement des caractères

• N'échappez que le guillemet qui correspond au délimiteur de votre string, ou changez de délimiteur pour éviter tout échappement.
• Préférez les littéraux de gabarit pour les strings qui mélangent les styles de guillemets ou s'étendent sur plusieurs lignes.
• N'oubliez pas de doubler les antislashs lorsque vous passez un motif à new RegExp().
• Utilisez JSON.stringify, encodeURIComponent et une bibliothèque d'assainissement dédiée plutôt que d'échapper manuellement.
• Testez les strings et les motifs regex pour confirmer qu'ils se comportent comme prévu.

Conclusion

Maîtriser les séquences d'échappement en JavaScript améliore la capacité d'un développeur à gérer efficacement les strings et les données. Que ce soit pour des applications web ou des scripts côté serveur, comprendre comment échapper les caractères spéciaux est essentiel pour un développement de code robuste et sans erreur.

Entraînement