urlencode en Javascript

Une URL ne peut contenir qu'un sous-ensemble très restreint de caractères alpha numériques. Il est par exemple impossible d'y mettre des caractères accentués ou des espaces.

En réalité, on peut y mettre des caractères spéciaux, mais ceux-ci doivent être encodés avec un encodage créé spécialement pour cette utilisation, que l'on appelle URL encoding ou Percent encoding, parce qu'il utilise le symbole pourcentage : % pour échapper les métacaractères.

Voici par un petit exemple avec une chaine de caractère "brute", et sa version encodée :

Natif       : Pas de caractères accentués dans l'URL !
URL encoded : Pas%20de%20caract%C3%A8res%20accentu%C3%A9s%20dans%20l'URL%20!

Tous les caractères spéciaux ont été remplacés par des marqueurs composés du signe % suivi d'une valeur en hexadécimal.

En Javascript, il existe une fonction native qui permet d'encoder une chaine de caractère pour l'utiliser dans une URL : encodeURIComponent (qui est l'équivalent de la fonction PHP urlencode) :

alert( encodeURIComponent("Pas de caractères accentués dans l'URL !") );

Différence entre encodeURI et encodeURIComponent

Il existe aussi une autre fonction qui permet d'encoder des URL en Javascript : encodeURI. Cette seconde fonction est une version "intelligente" de encodeURIComponent, qui n'encode que les parties de l'URL à encoder.

En effet, imaginons cette URL : http://www.google.fr/search?q=Pas de caractères accentués dans l'URL !, elle n'est pas conforme car la valeur du paramètre q doit être encodée correctement. Maintenant si on applique la fonction encodeURIComponent à cette URL, voici ce qu'on obtient :

http%3A%2F%2Fwww.google.fr%2Fsearch%3Fq%3DPas%20de%20caract%C3%A8res%20accentu%C3%A9s%20dans%20l'URL%20!

La page du jour est collage spécial avec excel, bonne lecture.

Ça n'est toujours pas bon, car seul le paramètre q doit être encodé, et pas toute l'URL. Pour faire les choses correctement, on doit normalement construire l'URL manuellement, par concaténation, en encodant chaque paramètre individuellement, comme ceci :

var url = "http://www.google.fr/search?q=" + encodeURIComponent("Pas de caractères accentués dans l'URL !");

On obtiens alors cette url :

http://www.google.fr/search?q=Pas%20de%20caract%C3%A8res%20accentu%C3%A9s%20dans%20l'URL%20!

L'autre solution, c'est d'utiliser la fonction encodeURI qui va produire le même résultat. Je vous déconseille de l'utiliser, car cette fonction ne peut pas savoir à votre place ou sont les paramètres ) encoder, elle le devine en se basant sur certains métacaractères comme le / , ? ou &.

Encore faim ? allez lire ça : texte "boules à neige" !