Encodeur / Décodeur URL

L'encodage URL (pourcentage) remplace les caractères non sûrs ou ambigus dans une URL par % suivi de la valeur hexadécimale de leur octet UTF-8. Le mode Component utilise encodeURIComponent() et encode chaque caractère réservé — adapté aux valeurs insérées dans une chaîne de requête ou un chemin. Le mode URL complète utilise encodeURI(), qui préserve les caractères structurels d'URL comme :/?#&=.

Exemple

Entrée :

hello world & café / 日本語

Encodé en Component :

hello%20world%20%26%20caf%C3%A9%20%2F%20%E6%97%A5%E6%9C%AC%E8%AA%9E

Encodé en URL complète :

hello%20world%20&%20caf%C3%A9%20/%20%E6%97%A5%E6%9C%AC%E8%AA%9E

Remarquez que le mode URL complète laisse & et / intacts parce qu'ils ont un sens structurel dans une URL.

Erreurs courantes et pièges

La plupart des problèmes d'encodage viennent d'un mauvais choix de mode ou d'un double passage sur la même entrée. Les cas ci-dessous sont les plus fréquents.

• Utiliser encodeURI pour des valeurs de requête. encodeURI("a&b=c") renvoie a&b=c (inchangé), ce qui casse la chaîne de requête. Utilisez le mode Component (encodeURIComponent) pour les valeurs.
• Double encodage. Encoder hello%20world une seconde fois donne hello%2520world. Décodez d’abord ou sautez une couche.
• Oublier #. Un # dans une valeur de requête est interprété comme début de fragment s'il n'est pas encodé en %23.
• Confusion avec le signe plus. + signifie espace dans les corps form-encoded, mais c'est un + littéral dans un chemin ou une requête URL. Pour envoyer un vrai plus dans une valeur de requête, encodez-le en %2B.
• Séquence de pourcentage mal formée. Un % littéral jamais encodé fait échouer decodeURIComponent avec URI malformed. Encodez le % en %25 ou supprimez les % isolés avant le décodage.
• UTF-8 contre vieux serveurs Latin-1. Cet outil utilise toujours UTF-8. Certains très vieux systèmes attendent Latin-1 / windows-1252 — là-bas, é vaut %E9 et non %C3%A9. Si vous voyez du mojibake, l'autre extrémité n'est pas en UTF-8.

Quelle est la différence entre encodeURI et encodeURIComponent ?

encodeURIComponent échappe tout ce qui n'est pas lettre, chiffre ou l'un des caractères -_.!~*'(), il est donc sûr pour des valeurs de requête isolées et des segments de chemin. encodeURI laisse tranquilles les caractères réservés URL comme :/?#&=, il sert donc à encoder une URL entière déjà structurée. Utilisez Component 95 % du temps ; n'utilisez URL complète que pour une URL quasi valide contenant des espaces ou de l'Unicode.

Quels caractères faut-il réellement encoder dans une chaîne de requête ?

Dans une valeur, les délimiteurs & et = doivent être encodés (sinon ils ressemblent à des séparateurs). L'espace devient %20 ou +. Le marqueur de fragment # doit être encodé. Aussi : /, ?, tout ce qui n'est pas ASCII et les caractères de contrôle. encodeURIComponent gère tout cela ; encodeURI laisse &, =, /, ?, # intacts car ils sont structurels.

Pourquoi mon URL est-elle doublement encodée ?

Le double encodage survient quand on encode une valeur déjà encodée. Un espace devient %20, puis le % devient %25, donnant %2520. Cela se produit souvent en repassant une URL déjà encodée dans encodeURIComponent, ou avec un framework qui ajoute un encodage automatique au-dessus du vôtre. Décodez une fois puis réencodez proprement, ou sautez une couche.

Comment sont gérés les caractères non-ASCII comme les emojis ou lettres accentuées ?

Les encodeurs de JavaScript convertissent d'abord les caractères non-ASCII en octets UTF-8, puis encodent chaque octet en pourcentage. Ainsi é devient %C3%A9 (deux octets) et un emoji comme 😀 devient %F0%9F%98%80 (quatre octets). Le décodage fait l'inverse. C'est le comportement standard RFC 3986, compatible avec tout serveur moderne.

Pourquoi le décodage échoue-t-il avec « URI malformed » ?

decodeURIComponent lève une erreur sur une séquence de pourcentage invalide — un % isolé sans deux chiffres hex (ex. %ZZ ou juste %), ou des séquences UTF-8 invalides (ex. %C3 sans octet de continuation valide). Causes fréquentes : un % littéral jamais encodé dans l'entrée, ou une chaîne déjà décodée une fois qui contient encore des signes pourcent.

Les espaces doivent-ils devenir + ou %20 ?

On rencontre les deux. %20 est correct partout — dans les chemins, les chaînes de requête et les fragments. Le raccourci + ne signifie « espace » qu'à l'intérieur du format application/x-www-form-urlencoded utilisé par les soumissions de formulaires HTML. Cet outil utilise %20 comme encodeURIComponent. Si vous voulez spécifiquement +, remplacez %20 par + après l'encodage.