Encodeur d'entités HTML gratuit — Échapper le HTML

Qu'est-ce que l'encodage d'entités HTML ?

// Server-side templates auto-escape, but when you build HTML by hand you must escape yourself.
// The five reserved characters and their safe entities:
//   <  →  &lt;     >  →  &gt;     &  →  &amp;     "  →  &quot;     '  →  &#x27;

// Node.js — escape untrusted input before inserting it into HTML element content.
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')   // & first, so later entities are not double-escaped
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;'); // numeric form — safe in HTML4, HTML5 and XML
}

const userInput = `<a href="x">Tom & Jerry's</a>`;
const safe = escapeHtml(userInput);
// → &lt;a href=&quot;x&quot;&gt;Tom &amp; Jerry&#x27;s&lt;/a&gt;
document.getElementById('out').innerHTML = `<p>${safe}</p>`; // renders as literal text

// ---------------------------------------------------------------
// In practice, prefer the platform's built-in escaping where it exists:
//   - React / Vue / Angular escape interpolated text by default
//   - Use textContent instead of innerHTML when you only need text:
//       el.textContent = userInput;  // the browser escapes for you
//   - Server frameworks (Jinja, ERB, Blade) auto-escape unless you opt out

Fonctionnalités clés

Exemples détaillés

<a href="x">Tom & Jerry's</a>

<a href="x">Tom & Jerry's</a>

Visit our café — it's 😀

Visit our café — it's 😀

<>&"'

<>&"'

<>&"'

<>&"'

café

café  (named)  ·  café  (decimal)  ·  café  (hex)

Comment utiliser l'encodeur d'entités HTML

1. 1

   Collez votre HTML ou votre texte

   Déposez le balisage ou le texte brut que vous voulez échapper dans la zone de saisie. La sortie encodée se met à jour en direct au fur et à mesure de la frappe — il n'y a pas de bouton d'envoi et rien n'est transmis nulle part.

2. 2

   Choisissez le format d'entité

   Nommé est le format lisible par défaut (<, &, ©). Passez à Décimal (<) ou Hex (<) quand un système destinataire préfère les références numériques ou que vous ne pouvez pas garantir la prise en charge des entités nommées.

3. 3

   Encodez éventuellement tout le non-ASCII

   Laissez cette option désactivée pour les pages UTF-8 modernes afin que les accents et les émojis restent des caractères bruts lisibles. Cochez-la uniquement quand le texte doit survivre à un jeu de caractères hérité à un octet, ce qui convertit chaque caractère au-dessus de 0x7F en entité ASCII.

4. 4

   Copiez le résultat encodé

   Cliquez sur Copier pour placer la chaîne échappée dans votre presse-papiers, prête à être collée dans un modèle, une page de documentation ou un champ de base de données. Effacer réinitialise les deux volets pour l'extrait suivant.

5. 5

   Besoin de l'inverse ? Inversez le sens

   Utilisez Inverser le sens pour basculer vers le décodeur d'entités HTML lorsque vous voulez retransformer les entités en caractères qu'elles représentent.

Erreurs courantes d'encodage HTML

replace < and > first, then &  →  &lt;  becomes  &amp;lt;

escape & first, then the rest  →  <  stays  <

It's here  →  may render as  It's here

It's here  →  renders as  It's here

&  encoded again  →  &  shows as  &

&  left as-is  →  renders as  &

href="/search?q=a&b c"  →  the space still breaks the URL

href="/search?q=a%26b%20c"  →  URL-encoded, valid

café on a UTF-8 page  →  needless, harder to read

café on a UTF-8 page  →  valid and clean

title="He said "hi""  →  attribute breaks out

title="He said "hi""  →  contained

Qui utilise cet outil

Afficher des échantillons de code dans une page web

Vous rédigez un tutoriel ou une documentation qui doit montrer du HTML littéral ? Échappez l'extrait pour que <strong>bold</strong> apparaisse comme du texte plutôt que d'être rendu. Collez le balisage, copiez la sortie échappée et déposez-la dans un bloc <pre> ou <code>.

Assainir l'entrée utilisateur contre le XSS

Avant d'insérer une chaîne fournie par un utilisateur dans votre HTML, échappez les cinq caractères réservés pour qu'une charge comme <script>…</script> devienne du texte inerte. C'est la défense fondamentale contre l'injection de script quand vous construisez le balisage à la main.

Stocker du balisage dans un champ de base de données ou du JSON

Besoin de sauvegarder un fragment HTML comme une chaîne brute sans qu'il soit interprété en aval ? Encodez-le d'abord pour que les chevrons et les esperluettes survivent au stockage et au réaffichage intacts, puis décodez au retour.

Rédiger des modèles d'e-mail et du contenu CMS

Les clients de messagerie et les systèmes de gestion de contenu sont intolérants aux caractères spéciaux bruts. Échappez l'ensemble réservé — et éventuellement tout le non-ASCII — pour que votre modèle s'affiche de manière cohérente entre les clients qui peuvent ne pas partager votre jeu de caractères.

Convertir du texte pour un jeu de caractères hérité

Vous ciblez un système incapable de gérer l'UTF-8 brut ? Activez « Encoder tout le non-ASCII » pour réécrire chaque lettre accentuée, symbole et émoji en entité ASCII, garantissant que le texte survit au transport à travers des pipelines propres sur 7 bits.

Échapper des valeurs d'attribut XML et SVG

Le XML et le SVG en ligne partagent les caractères réservés du HTML. Encodez les guillemets et les chevrons pour qu'une chaîne contenant du balisage s'insère sans risque dans une valeur d'attribut sans casser la structure du document.

Rechercher une entité rapidement

Vous avez oublié si le signe de marque déposée est ™ ou ™ ? Saisissez le caractère, lisez son entité nommée, décimale et hexadécimale dans la sortie, ou consultez le tableau de référence rapide intégré sans quitter la page.

Comment fonctionne l'encodeur

Mode caractères spéciaux (par défaut)

Par défaut, seuls les cinq caractères réservés du HTML sont échappés — & < > " ' — en suivant les règles de sérialisation HTML du WHATWG pour une sortie sûre. & est remplacé en premier pour que les entités produites pour les autres caractères ne soient pas doublement échappées. Tous les autres caractères, y compris non ASCII, passent inchangés.

L'apostrophe utilise '

Plutôt que la nommée ' — non définie en HTML4 et risquée dans certains analyseurs hérités — le guillemet simple est émis sous la forme numérique ' (décimal '), référençant U+0027. Cela correspond à la convention de bibliothèques éprouvées comme he et garantit que la sortie est sûre en HTML4, HTML5 et XML.

Encodage nommé, décimal et hexadécimal

Le sélecteur de format contrôle l'écriture de chaque caractère échappé : Nommé utilise les libellés définis là où ils existent (<, ©), Décimal écrit le point de code Unicode en base 10 (<), et Hex l'écrit en base 16 (<). Les formes numériques référencent les mêmes points de code que les formes nommées et sont interchangeables à l'analyse.

Option « encoder tout le non-ASCII »

Quand elle est activée, chaque caractère dont le point de code dépasse 0x7F est converti en entité dans le format choisi — café devient café (nommé), café (décimal) ou café (hex). Les caractères astraux comme les émojis sont encodés avec leur point de code complet (😀 → 😀). Cela produit une sortie ASCII propre sur 7 bits pour le transport hérité.

Jeu de caractères contre entités

Un jeu de caractères définit comment le texte est stocké en octets ; une entité est une façon d'écrire un caractère en n'utilisant que de l'ASCII. Sur une page UTF-8, les caractères non ASCII n'ont besoin d'aucune entité, c'est pourquoi le mode par défaut les laisse bruts. Tout encoder n'est nécessaire que lorsque la sortie doit traverser un jeu de caractères non Unicode ou un système hostile à l'UTF-8.

Local au navigateur, réseau nul

L'encodage s'exécute de manière synchrone en JavaScript sur le thread principal ; il n'y a aucun appel d'API, aucun aller-retour de worker vers un serveur, et aucune persistance. L'entrée ne quitte jamais la page, ce que vous pouvez confirmer en observant un panneau Réseau vide pendant la frappe.

Bonnes pratiques d'échappement HTML

Échapper à la sortie, dans le bon contexte

Encodez la donnée au moment où vous l'insérez dans le HTML, pas à sa réception, et adaptez l'encodage au contexte. L'encodage d'entités HTML est pour le contenu d'élément et d'attribut HTML ; utilisez l'encodage URL dans les URL et l'échappement JavaScript/JSON dans les blocs de script. Échapper dans le mauvais contexte laisse une faille.

Toujours échapper l'entrée non fiable

Toute chaîne provenant d'un utilisateur, d'un téléversement ou d'une API externe doit être échappée avant d'atterrir dans votre balisage. C'est la défense XSS centrale : une charge comme <script>alert(1)</script> devient du texte inerte une fois les chevrons transformés en entités.

Préférer l'échappement intégré là où il existe

React, Vue et la plupart des moteurs de templates côté serveur échappent automatiquement le texte interpolé ; définir element.textContent échappe aussi pour vous. Utilisez cet outil pour des conversions ponctuelles et pour comprendre la sortie — mais dans le code applicatif, appuyez-vous sur l'auto-échappement du framework plutôt que de le coder à la main.

Laisser le non-ASCII brut sur les pages UTF-8

Si votre page déclare <meta charset="utf-8">, n'encodez pas les accents et les émojis en entités — l'UTF-8 brut est plus court, plus lisible et tout aussi correct. Réservez « Encoder tout le non-ASCII » aux véritables cas de jeux de caractères hérités qui l'exigent réellement.

Utiliser l'apostrophe numérique dans les contextes mixtes

Quand la sortie peut être consommée par d'anciens analyseurs, des processeurs XML ou des clients de messagerie, préférez la forme numérique ' à la nommée ' pour le guillemet simple. La forme numérique est comprise partout ; la forme nommée non, et un « ' » littéral perdu dans le texte rendu est un bogue courant et évitable.

Questions fréquentes