Encode URL en JavaScript : 3 méthodes qui sauveront votre site

Introduction : Pourquoi l'encodage d'URL n'est pas une théorie ennuyeuse, mais le salut de votre application

Imaginez la situation : vous écrivez une application web en JavaScript, un utilisateur saisit la requête de recherche « JavaScript & Node.js : meilleures pratiques ». Vous transmettez ce texte dans l'URL comme paramètre d'une requête GET. Vous ouvrez la console du navigateur — et là, une erreur. Ou pire encore — la requête part, mais le serveur ne la comprend pas, et au lieu des résultats de recherche, l'utilisateur voit une page vide.

Cela vous dit quelque chose ? Si oui, cet article est pour vous. Si non, il l'est quand même, car tôt ou tard, vous y serez confronté. Le sujet de l'encodage d'URL en JavaScript est l'une des questions les plus populaires sur Stack Overflow (des dizaines de milliers de vues), et ce n'est pas pour rien. C'est ce petit détail qui distingue un développeur professionnel d'un débutant.

Aujourd'hui, nous allons décortiquer trois méthodes d'encodage d'URL en JavaScript, apprendre à choisir le bon outil pour chaque tâche et examiner des exemples concrets de la vie d'un développeur web. C'est parti !

Qu'est-ce que l'encodage d'URL et pourquoi est-il nécessaire

Avant d'écrire du code, commençons par la théorie. Une URL (Uniform Resource Locator) a une structure stricte. Seuls certains caractères y sont autorisés : lettres latines, chiffres et quelques caractères spéciaux (-, _, ., ~). En revanche, les espaces, les caractères cyrilliques, les symboles &, ?, # et autres sont interdits.

Lorsque nous essayons de transmettre de tels caractères dans une URL, le navigateur ou le serveur peut mal interpréter la requête. Par exemple, le symbole & dans la chaîne de requête sépare les paramètres les uns des autres. S'il se retrouve à l'intérieur de la valeur d'un paramètre, la logique est cassée.

La solution — l'encodage d'URL (encodage en pourcentage). Les caractères interdits sont remplacés par une séquence de la forme %XX, où XX est le code hexadécimal du caractère en encodage UTF-8. Par exemple, un espace devient %20, et le « а » cyrillique devient %D0%B0.

En JavaScript, il existe trois mécanismes intégrés pour cela. Examinons chacun d'eux.

Méthode 1 : encodeURI() — pour les URL entières

La fonction encodeURI() est destinée à l'encodage d'une URL complète. Elle remplace tous les caractères, sauf ceux qui font partie de la syntaxe URI : :, /, ?, #, &, = et autres.

Syntaxe

encodeURI(uri)

Exemple

const url = "https://pythonlib.ru/search?q=JavaScript & Node.js";\nconst encoded = encodeURI(url);\nconsole.log(encoded);\n// Résultat : "https://pythonlib.ru/search?q=JavaScript%20&%20Node.js"\n

Notez que encodeURI() a encodé les espaces, mais n'a pas touché aux symboles &, ? et =. C'est correct pour une URL entière, mais dangereux pour les paramètres. Si notre requête contenait le symbole & à l'intérieur de la valeur d'un paramètre, il serait resté tel quel et aurait brisé la chaîne de requête.

Quand l'utiliser

\n
• Lorsque vous devez encoder une URL entière (par exemple, pour la transmettre à window.location)
\n
• Lorsque l'URL ne contient pas de données utilisateur avec des caractères potentiellement dangereux
\n

Quand NE PAS l'utiliser

\n
• Pour encoder des paramètres de requête individuels
\n
• Si l'URL contient une saisie utilisateur (formulaires, recherche, commentaires)
\n

Méthode 2 : encodeURIComponent() — pour les paramètres et les valeurs

C'est votre outil principal au quotidien. encodeURIComponent() encode tous les caractères, à l'exception des lettres, des chiffres et de -, _, ., ~. Elle encode même les caractères qui font partie de la syntaxe URI — &, ?, =, # et ainsi de suite.