Guide Complet de l'Encodage URL : Principes et Pratique de l'Encodage Pourcentuel

Rappel de la Structure URL

https://user:pass@www.example.com:8080/path/to/page?name=张三&age=25#section
└──┬──┘ └────┬────┘ └──────┬──────┘└─┬─┘└────┬─────┘└──────┬──────┘└──┬──┘
  scheme   userinfo     host      port    path        query     fragment

Seules les parties chemin, query et fragment nécessitent un encodage. Le scheme et le host suivent leurs propres règles.

Pourquoi l'Encodage URL Est Nécessaire

Les URLs ne peuvent contenir que des caractères ASCII imprimables. Les suivants doivent être encodés :

Caractère	Encodage	Raison
Espace	`%20` ou `+`	Les espaces nus ne sont pas autorisés
Chinois「张三」	`%E5%BC%A0%E4%B8%89`	Non-ASCII
`&`	`%26`	Séparateur de query
`=`	`%3D`	Séparateur clé=valeur
`#`	`%23`	Marqueur de fragment
`?`	`%3F`	Début de query
`/`	`%2F`	Séparateur de chemin

Utiliser l'Outil d'Encodage/Décodage URL de ToolsKu

Étapes

Ouvrez l'outil d'Encodage/Décodage URL
Entrez une URL ou du texte
Choisissez encoder ou décoder
Consultez le résultat

encodeURI vs encodeURIComponent

Fonction	Non encodé	Cas d'utilisation
`encodeURI()`	`: / ? # [ ] @ ! $ & ' ( ) * + , ; =`	URL complète
`encodeURIComponent()`	`A-Z a-z 0-9 - _ . ! ~ * ' ( )`	Valeurs de paramètres URL

const base = 'https://example.com/search';

// ✅ Encoder les valeurs de paramètres
const url = `${base}?q=${encodeURIComponent('hello world')}`;
// → https://example.com/search?q=hello%20world

// ❌ Encoder l'URL entière
const wrong = encodeURIComponent('https://example.com/search?q=test');
// → https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dtest

Scénarios Pratiques

Paramètres de query en chinois

Original : https://search.com/q=前端开发
Encodé :  https://search.com/q=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91

Analyser les paramètres URL

Utilisez l'outil d'Analyse URL pour décomposer une URL et afficher les paramètres de query dans un tableau :

Entrée : https://api.com/users?name=张三&role=admin&page=1
Sortie :
  name  = 张三
  role  = admin
  page  = 1

Noms de domaine internationalisés (IDN)

Encodage Punycode pour le domaine chinois「工具库.com」:

工具库.com → xn--6qq986b3xl.com

Utilisez l'outil Punycode pour convertir entre les formes.

Paramètres URL encodés en Base64

Parfois, vous devez encoder un objet JSON comme paramètre URL :

{"user":"admin","role":"editor"}
  → Base64 → eyJ1c2VyIjoiYWRtaW4iLCJyb2xlIjoiZWRpdG9yIn0=
  → URL encode → eyJ1c2VyIjoiYWRtaW4iLCJyb2xlIjoiZWRpdG9yIn0%3D

Erreurs Courantes

Double encodage

Original :     hello world
Un encodage : hello%20world  ✅
Deux encodages : hello%2520world  ❌ (décoder une fois → hello%20world)

Encoder l'URL entière

Utilisez encodeURIComponent uniquement sur les valeurs de paramètres, pas sur l'URL complète.

Espace : `+` ou `%20` ?

Dans les paramètres de query : + et %20 sont équivalents
Dans les chemins : seul %20 est valide
Recommandation : utilisez %20 de manière cohérente

Résumé

L'encodage URL est une compétence fondamentale du développement Web. Comprendre la différence entre encodeURI et encodeURIComponent, l'encodage UTF-8 pour les paramètres chinois et le Punycode pour les domaines internationalisés permet d'économiser des heures de débogage. ToolsKu fournit des outils d'Encodage/Décodage URL, d'Analyse URL et Punycode.