</>

Encodeur HTML

Encodez et décodez les entités HTML en ligne gratuitement. Convertissez les caractères spéciaux en codes HTML et inversement.

Un encodeur HTML remplace les caractères qui ont un sens dans le balisage par leurs entités, afin que le navigateur les affiche au lieu de les interpréter. Sur l'onglet Encoder avec Entités nommées, cinq caractères changent : & < > " et '. Encoder <p>Hello & World "quotes" 'apostrophe'</p> fait passer 42 caractères à 76, et le bandeau affiche 9 entités trouvées et une variation de taille de +81 %.

Longueur entrée
Longueur sortie
Entités trouvées
Variation taille
Balises HTML
Contenu texte
Taille totale
🔍
Caractère Entité nommée Entité numérique Entité hexadécimale Description
Aucune entité trouvée

Intégrer cet outil sur votre site

× px

                        

💡 Conseil d'intégration

Copiez le code d'intégration et collez-le dans le HTML de votre site. La version responsive s'adapte automatiquement à toutes les tailles d'écran.

4.0
3 avis

À propos de Encodeur HTML

Quatre onglets surmontent l'outil. Encoder et Décoder partagent le même couple entrée/sortie ; Aperçu affiche le rendu du HTML collé ; Référence des entités est un tableau consultable d'entités nommées, filtrable par Basique, Symboles, Maths, Devises, Flèches ou Accents. Tout s'exécute dans le navigateur au fil de la frappe, sans aucun envoi.

L'encodage propose quatre réglages. Entités nommées ne touche qu'aux cinq caractères qui comptent dans le balisage et écrit &amp;, &lt;, &gt;, &quot; et &#39; — l'apostrophe reçoit la forme numérique, car &apos; ne faisait pas partie de HTML 4 et certains clients de messagerie anciens le gèrent mal. Entités numériques convertit ces cinq caractères plus tout caractère au-delà du point de code 127 en &#NNN;. Entités hexadécimales fait de même en &#xNN; avec des chiffres majuscules. Tous les caractères convertit absolument chaque caractère, ce qui ne sert qu'à l'obfuscation et multiplie la taille.

Le décodage n'utilise pas innerHTML. Le texte est confié à DOMParser et c'est le textContent du corps obtenu qui est renvoyé : une chaîne contenant une balise script redevient donc du texte visible au lieu de s'exécuter pendant que vous l'inspectez. Quatre compteurs sous la sortie indiquent la longueur d'entrée, la longueur de sortie, les entités trouvées et la variation de taille en pourcentage, et le bouton Échanger place la sortie dans l'entrée en inversant le mode, le moyen le plus rapide de vérifier un aller-retour.

Ce que cette page ne fait pas : elle ne nettoie pas du HTML destiné à la publication, et l'encodage ne remplace pas l'échappement propre à chaque contexte. Une valeur qui part dans un attribut, une URL, une chaîne JavaScript ou un bloc CSS exige l'échappement de ce contexte, pas des entités HTML. Servez-vous-en pour afficher du balisage sous forme de texte, inspecter une charge encodée ou retrouver une entité, non comme couche de sécurité d'une application.

Cas d'utilisation

Un blogueur qui colle un exemple de code dans son CMS l'encode d'abord, si bien que les chevrons survivent à l'éditeur et que le lecteur voit <div class="card"> comme du texte plutôt qu'un div vide invisible.
Un développeur qui a reçu une ligne de journal pleine de &lt; et &amp;#39; la colle dans Décoder pour lire la requête d'origine, puis appuie sur Échanger pour vérifier qu'elle se réencode exactement comme dans le journal.
Une responsable de newsletter dont l'objet s'est cassé chez un client de messagerie passe des Entités nommées aux Entités numériques pour que les caractères accentués voyagent en &#233; plutôt qu'en octets bruts.
Une personne qui rédige de la documentation ouvre Référence des entités et cherche « arrow » pour trouver l'entité de la flèche droite, au lieu de coller un caractère qui pourrait ne pas survivre à la chaîne de publication.
Un ingénieur support qui vérifie si l'extrait d'un client est mal formé le colle dans Aperçu, lit le nombre de balises et le rendu, et repère immédiatement l'élément de liste non fermé.

Comment utiliser

1

Choisissez l'onglet Encoder ou Décoder en haut ; Encoder est sélectionné à l'ouverture de la page.

2

Pour l'encodage, choisissez Entités nommées, Entités numériques, Entités hexadécimales ou Tous les caractères, ce qui décide de l'ampleur de la conversion.

3

Collez votre balisage ou votre texte encodé dans le champ d'entrée ; la sortie se met à jour au fil de la frappe.

4

Lisez les quatre compteurs sous la sortie : longueur d'entrée, longueur de sortie, entités trouvées et variation de taille.

5

Appuyez sur Copier au-dessus de la sortie pour récupérer le résultat, ou sur Échanger pour le placer dans l'entrée et inverser le mode.

6

Utilisez l'onglet Aperçu pour afficher le rendu du HTML collé, ou Référence des entités pour chercher une entité nommée par nom ou par catégorie.

Astuces Pro

  • Entités nommées laisse intacts les caractères accentués et non latins : seuls & < > " et ' changent. Si un é ou un mot en cyrillique doit survivre à une chaîne ancienne, passez d'abord en Entités numériques.
  • L'apostrophe ressort en &#39; et non &apos;, même en mode nommé. C'est volontaire : &apos; relève de XML et de HTML5 mais n'a jamais existé en HTML 4, la forme numérique est donc celle qui s'affiche partout.
  • Échanger réalise un aller-retour en un clic. Encodez, appuyez sur Échanger, et le texte encodé devient l'entrée en mode Décoder ; si ce qui revient diffère du point de départ, l'original était déjà partiellement encodé.
  • Surveillez le compteur Variation taille avant d'encoder une charge volumineuse. Le mode Tous les caractères multiplie la longueur, ce qui compte si le résultat part dans un champ limité, comme une balise meta ou une chaîne de requête.
  • Servez-vous de l'onglet Aperçu pour voir un rendu, pas pour tester des attaques : il affiche une version assainie de ce que vous collez et ne reproduira donc pas tous les comportements d'une vraie page.

Dépannage

Problème:

La sortie est identique à l'entrée et Entités trouvées reste à 0.

Solution:

Avec Entités nommées, seuls & < > " et ' sont convertis : un texte dépourvu de ces cinq caractères revient donc inchangé, ce qui est le comportement attendu. Pour convertir aussi les caractères accentués ou non latins, passez en Entités numériques ou hexadécimales.

Problème:

Le décodage rend un texte qui contient encore &amp; et &lt;.

Solution:

La source était doublement encodée : l'esperluette de chaque entité avait elle-même été encodée avant que vous la receviez. Décodez une seconde fois la sortie, ou utilisez Échanger puis relancez le décodage, jusqu'à ce que les entités cessent de diminuer.

Problème:

La sortie encodée affiche &#39; là où j'attendais &apos;.

Solution:

C'est voulu. &apos; a été introduit pour XML et HTML5 et n'a jamais existé en HTML 4 : cet outil écrit donc le numérique &#39;, que tous les navigateurs et clients de messagerie affichent correctement.

Problème:

Le compteur Variation taille grimpe à plusieurs centaines de pour cent.

Solution:

Le type d'encodage est réglé sur Tous les caractères, qui convertit chaque caractère du texte en entité numérique au lieu des cinq qui comptent dans le balisage. Revenez à Entités nommées si vous ne cherchez pas précisément cette obfuscation.

Questions fréquemment posées

Pour que le navigateur affiche les caractères au lieu de les interpréter. Sans encodage, un < ouvre une balise et un & ouvre une entité : un exemple de code disparaît alors dans la structure de la page, et du texte collé d'ailleurs peut injecter du balisage non voulu. L'encodage réécrit ces caractères en entités, qui s'affichent tels quels.

C'est l'entité de l'esperluette. L'esperluette doit être encodée parce qu'elle ouvre toutes les autres entités : écrire &amp; dans la source produit un & littéral à l'écran, alors qu'un & nu suivi de lettres et d'un point-virgule serait lu comme une autre entité. C'est la première substitution effectuée par cet outil, avant < et >.

Quand vous recevez un texte qui contient déjà des entités et que vous voulez récupérer les caractères d'origine : une ligne de journal, un champ d'API, un extrait copié plein de &lt; et &amp;. Collez-le dans l'onglet Décoder et la sortie est le texte brut. Le décodage sert à lire et à inspecter, pas à réinjecter le résultat tel quel dans une page.

Ils résolvent des problèmes distincts. Les entités HTML protègent les caractères qui ont un sens pour un analyseur HTML ; l'encodage pourcent protège ceux qui ont un sens dans une URL : une espace devient %20 et une esperluette %26. Une valeur qui part dans un lien exige l'encodage d'URL ; la même valeur affichée comme texte exige l'encodage HTML. L'un ne fait pas l'autre.

Avec Entités nommées, exactement cinq : & devient &amp;, < devient &lt;, > devient &gt;, " devient &quot; et ' devient &#39;. Tout le reste, y compris lettres accentuées et émojis, reste tel quel. Passez en Entités numériques ou hexadécimales et tout caractère au-delà du point de code 127 est converti aussi.

C'est la bonne défense à un seul endroit : du texte inséré dans le corps d'une page. Une valeur placée dans un attribut, une URL, une chaîne JavaScript ou un bloc de style exige l'échappement propre à ce contexte, et une valeur insérée via innerHTML n'est pas protégée du tout. Voyez cette page comme un outil d'affichage de balisage, pas comme la couche de sécurité d'une application.

Non. Le décodage passe par DOMParser et renvoie le textContent du corps analysé au lieu d'affecter innerHTML : une charge contenant une balise script revient donc en texte visible et n'est jamais exécutée. C'est ce qui rend sûr le collage d'une chaîne suspecte pour lire ce qu'elle contient vraiment.

Elles encodent un caractère par son point de code plutôt que par son nom : é s'écrit &#233; ou &#xE9;. Les formes numériques fonctionnent pour tous les caractères, y compris ceux sans entité nommée, et survivent aux chaînes de traitement qui abîment les octets non ASCII. Les entités nommées sont plus lisibles, les numériques plus portables.

Vous pouvez copier la sortie dans une chaîne JavaScript, mais n'utilisez pas les entités HTML comme échappement pour JavaScript lui-même : une valeur qui part dans un script exige un encodage JSON ou un échappement approprié. Dans le navigateur, l'équivalent de l'étape de décodage de cette page est DOMParser, précisément ce qu'utilise l'outil.

Ouvrez l'onglet Référence des entités, tapez une partie du nom dans le champ de recherche, ou restreignez avec les filtres Basique, Symboles, Maths, Devises, Flèches et Accents. Le tableau affiche le caractère à côté de sa forme nommée, vous copiez celle que votre format cible accepte.

Outils populaires

Plus d'outils à afficher
Explorer tous les outils
FreeWebTools AI
Powered by free AI models · Full chat →