Comment échapper et déséchapper du texte HTML / URL / JS

Pourquoi c’est important

Imaginez coller un avis client dans une config JSON qui alimente une bannière web. L’avis contient un " isolé. Le build passe, la bannière part en prod, la page affiche Uncaught SyntaxError. Le correctif est trivial — échapper le guillemet — mais savoir quel échappement (entité HTML ? \" JSON ? URL %22 ?), c’est le vrai savoir-faire. Cet outil regroupe tout pour arrêter de deviner et de copier des RegExp depuis des forums.

Trois scénarios réels

Développeur front

Embarquer du contenu utilisateur en HTML statique sans risque

Transformez <script> en <script> pour afficher le texte littéral au lieu de l’exécuter.

Pas de XSS ni de rendu cassé

Ingénieur backend

Construire une query string avec caractères spéciaux

Encodez en URL name=O'Hara en name=O%27Hara avant d’ajouter à l’URL.

Appel API qui fonctionne

Ingénieur données

Importer un CSV avec virgules et guillemets embarqués

Entourez les champs de guillemets et doublez les guillemets intérieurs — le profil CSV fait les deux automatiquement.

Import propre

Parcours

Ouvrez l’outil d’échappement de texte.

Coller l’entrée brute
L’outil garde l’original à gauche et montre le résultat échappé à droite.
Choisir le format cible
HTML, URL, JavaScript / JSON, CSV ou XML. Chaque format a ses règles. Choisissez celui de la destination, pas de la source.
Basculer Échapper vs Déséchapper
Passez en Déséchapper quand vous avez déjà une chaîne échappée et voulez l’original — ex. déboguer une ligne de log JSON-encodée.
Copier la chaîne sûre
Collez dans le code, la config ou l’appel API.

Échappement HTML contre balises orphelines

Brut

<a href="x">Hi & welcome</a>

Échappé HTML

&lt;a href=&quot;x&quot;&gt;Hi &amp; welcome&lt;/a&gt;

Échappement façon JavaScript pour littéral de chaîne JSON

Brut

She said "hi"	on Tuesday — line break
follows.

Échappé JS

She said \"hi\"\ton Tuesday \u2014 line break\nfollows.

Sélecteur de mode d’échappement HTML / URL / JS / CSV / XML — Changer de mode reformate le volet de droite en temps réel.

Conseils avancés

Échappez seulement quand nécessaire. Si la destination est textContent d’un nœud DOM, le navigateur échappe déjà. Le double échappement est le bug le plus fréquent.
Pour les query strings, encodez chaque valeur séparément. Encoder toute l’URL légitime échappe aussi = et &.
JSON ≠ JavaScript. Une chaîne JS peut utiliser des apostroples ; JSON non. Choisissez le profil JS/JSON qui correspond à la cible.
Test aller-retour : échappez, déséchappez, vérifiez l’identité à l’original. Sinon l’entrée avait des caractères de contrôle à nettoyer plus fort d’abord.

Pièges courants

Piège courant

Double échappement : "&" au lieu de "&"

Vous avez échappé du texte déjà échappé. Lancez Déséchapper d’abord pour confirmer que l’entrée est brute, puis échappez une fois pour la destination.

Piège courant

Caractères Unicode deviennent `\u00XX` littéraux dans votre fichier

Certains outils en aval (vieux PHP, pilotes SQL) ne comprennent pas \uXXXX. Utilisez le profil URL (pourcentage sur octets UTF-8) ou stockez l’UTF-8 brut et n’échappez qu’à la sortie.

Piège courant

Le CSV échappe une tabulation dans un champ quoté

La règle CSV ne double que les guillemets internes ; tabulations et retours ligne passent tels quels. Si votre importeur compte des colonnes sur tab / newline, changez le séparateur (ex. ;) ou quotez tout champ.

Quand ce n’est pas l’outil adapté

Assainir du HTML à afficher avec balises autorisées (commentaires blog) — il faut un assainisseur HTML complet (DOMPurify), pas un échappement aveugle.
Requêtes SQL paramétrées — utilisez le paramétrage du pilote, pas l’échappement chaîne à la main.
Arguments shell — dépend du shell (bash vs cmd.exe). Utilisez shlex ou équivalent dans votre langage.

FAQ

Différence entre encodeURI et encodeURIComponent ?

encodeURI laisse les caractères réservés d’URL (:, /, ?) intacts. encodeURIComponent (profil URL par défaut ici) les encode, ce qui est correct pour une seule valeur, pas une URL entière.

Les emoji sont-ils préservés ?

Oui. Chaque profil encode la séquence UTF-8 multi-octets correctement (%F0%9F%98%80 en URL, \uD83D\uDE00 en paires substituts JS).

Mon texte est-il envoyé quelque part ?

Non. L’échappement est local ; le résultat ne quitte pas le navigateur.

Étapes suivantes

Après échappement, contrôlez la sortie en comparant à l’original.
Formatez proprement tout JSON embarqué avec le formateur de texte.
Pour encoder du binaire (pas du texte), utilisez le codec Base64 / Hex.

Pourquoi c’est important

Trois scénarios réels

Développeur front

Embarquer du contenu utilisateur en HTML statique sans risque

Transformez <script> en <script> pour afficher le texte littéral au lieu de l’exécuter.

Pas de XSS ni de rendu cassé

Ingénieur backend

Construire une query string avec caractères spéciaux

Encodez en URL name=O'Hara en name=O%27Hara avant d’ajouter à l’URL.

Appel API qui fonctionne

Ingénieur données

Importer un CSV avec virgules et guillemets embarqués

Entourez les champs de guillemets et doublez les guillemets intérieurs — le profil CSV fait les deux automatiquement.

Import propre

Parcours

Ouvrez l’outil d’échappement de texte.

Coller l’entrée brute
L’outil garde l’original à gauche et montre le résultat échappé à droite.
Choisir le format cible
HTML, URL, JavaScript / JSON, CSV ou XML. Chaque format a ses règles. Choisissez celui de la destination, pas de la source.
Basculer Échapper vs Déséchapper
Passez en Déséchapper quand vous avez déjà une chaîne échappée et voulez l’original — ex. déboguer une ligne de log JSON-encodée.
Copier la chaîne sûre
Collez dans le code, la config ou l’appel API.

Échappement HTML contre balises orphelines

Brut

<a href="x">Hi & welcome</a>

Échappé HTML

&lt;a href=&quot;x&quot;&gt;Hi &amp; welcome&lt;/a&gt;

Échappement façon JavaScript pour littéral de chaîne JSON

Brut

She said "hi"	on Tuesday — line break
follows.

Échappé JS

She said \"hi\"\ton Tuesday \u2014 line break\nfollows.

Conseils avancés

Échappez seulement quand nécessaire. Si la destination est textContent d’un nœud DOM, le navigateur échappe déjà. Le double échappement est le bug le plus fréquent.
Pour les query strings, encodez chaque valeur séparément. Encoder toute l’URL légitime échappe aussi = et &.
JSON ≠ JavaScript. Une chaîne JS peut utiliser des apostroples ; JSON non. Choisissez le profil JS/JSON qui correspond à la cible.
Test aller-retour : échappez, déséchappez, vérifiez l’identité à l’original. Sinon l’entrée avait des caractères de contrôle à nettoyer plus fort d’abord.

Pièges courants

Piège courant

Double échappement : "&" au lieu de "&"

Vous avez échappé du texte déjà échappé. Lancez Déséchapper d’abord pour confirmer que l’entrée est brute, puis échappez une fois pour la destination.

Piège courant

Caractères Unicode deviennent `\u00XX` littéraux dans votre fichier

Certains outils en aval (vieux PHP, pilotes SQL) ne comprennent pas \uXXXX. Utilisez le profil URL (pourcentage sur octets UTF-8) ou stockez l’UTF-8 brut et n’échappez qu’à la sortie.

Piège courant

Le CSV échappe une tabulation dans un champ quoté

Quand ce n’est pas l’outil adapté

Assainir du HTML à afficher avec balises autorisées (commentaires blog) — il faut un assainisseur HTML complet (DOMPurify), pas un échappement aveugle.
Requêtes SQL paramétrées — utilisez le paramétrage du pilote, pas l’échappement chaîne à la main.
Arguments shell — dépend du shell (bash vs cmd.exe). Utilisez shlex ou équivalent dans votre langage.

FAQ

Différence entre encodeURI et encodeURIComponent ?

Les emoji sont-ils préservés ?

Oui. Chaque profil encode la séquence UTF-8 multi-octets correctement (%F0%9F%98%80 en URL, \uD83D\uDE00 en paires substituts JS).

Mon texte est-il envoyé quelque part ?

Non. L’échappement est local ; le résultat ne quitte pas le navigateur.

Étapes suivantes

Après échappement, contrôlez la sortie en comparant à l’original.
Formatez proprement tout JSON embarqué avec le formateur de texte.
Pour encoder du binaire (pas du texte), utilisez le codec Base64 / Hex.