Ce qu'est l'encodage URL
Une URL n'accepte qu'un sous-ensemble restreint de caractères ASCII sans risque de confusion. Une espace, par exemple, casserait la lecture de l'adresse si elle était laissée telle quelle — elle est donc remplacée par %20. Une lettre accentuée comme « é » est d'abord convertie en octets UTF-8, puis chaque octet est écrit sous sa forme %XX : « é » devient %C3%A9.
% suivi de deux chiffres hexadécimaux représentant sa valeur en octet.C'est ce mécanisme qui permet d'ajouter du texte libre — une recherche, un nom, une adresse — dans un lien sans jamais casser sa structure.
encodeURIComponent vs encodeURI : lequel utiliser ?
encodeURIComponent() encode une seule valeur (un paramètre) et encode aussi &, =, ?, /. encodeURI() encode une adresse entière et laisse intacts les caractères structurels dont une URL a besoin pour fonctionner.C'est la confusion la plus fréquente chez les développeurs débutants. Si vous encodez une adresse complète avec encodeURIComponent, vous obtenez un résultat inutilisable : les : et / du protocole sont eux-mêmes transformés en %XX. À l'inverse, si vous encodez une seule valeur de paramètre avec encodeURI, un caractère comme & dans le texte ne sera pas encodé et pourra être interprété à tort comme un séparateur de paramètres.
| Fonction | Usage | Exemple d'entrée | Résultat |
|---|---|---|---|
| encodeURIComponent | Une seule valeur de paramètre | chaussures & sacs | chaussures%20%26%20sacs |
| encodeURI | Une adresse complète | https://ex.com/produits?q=sacs à main | https://ex.com/produits?q=sacs%20%C3%A0%20main |
Dans l'outil, l'onglet « Encoder » propose directement les deux modes (« Composant » et « URI complète ») pour éviter de retenir laquelle des deux fonctions correspond à quel besoin.
Lire une query string et repérer les paramètres de tracking
clé=valeur qui suivent le « ? » dans une URL, séparées par « & ». Un analyseur de query string décode chaque valeur et peut signaler les paramètres de tracking connus comme utm_source, gclid ou fbclid.Prenons un lien e-commerce réaliste (exemple, pas une vraie boutique) : ?couleur=rouge&taille=42&utm_source=instagram&utm_medium=cpc&fbclid=IwAR123abc. Les deux premiers paramètres décrivent le produit ; les trois suivants ne servent qu'au suivi publicitaire et n'ont aucune utilité pour la personne qui reçoit le lien.
| Paramètre | Rôle | Utile au destinataire ? |
|---|---|---|
couleur, taille | Décrit le produit affiché | Oui |
utm_source, utm_medium | Origine de la campagne marketing | Non |
fbclid, gclid | Identifiant de clic publicitaire | Non |
L'onglet « Analyser Query » décompose automatiquement ces paires en tableau et signale les paramètres de tracking reconnus, ce qui permet ensuite de reconstruire un lien plus court et plus propre via l'onglet « Construire Query ».
Le piège du double encodage (%2520)
%2520 apparaît quand un %20 déjà encodé (une espace) est encodé une seconde fois, car le caractère % lui-même devient %25. C'est le signe qu'un système a encodé les mêmes données deux fois.Ce cas survient souvent quand un lien passe par plusieurs couches logicielles qui encodent chacune sans vérifier si le texte l'est déjà — un formulaire, puis un système de redirection, puis un outil de tracking. Le résultat final devient illisible et peut même casser le décodage automatique de certains outils.
Scénario concret : un système encode d'abord une espace en %20, puis un second système, plus loin dans la chaîne, encode à nouveau tout le texte sans se soucier de ce qui existait déjà — le % du %20 devient alors %25, ce qui donne %2520. Pour retrouver le texte d'origine en une seule étape plutôt que de décoder manuellement couche par couche, l'onglet « Décoder » propose une option « décodage multi-niveaux » qui résout chaque niveau d'encodage imbriqué automatiquement.