Encodage d'URL en JavaScript

1. Quelle est la différence entre l’URI et l’URL ?
2. Encodage d’une URL à l’aide de la méthode encodeURI() en JavaScript
3. Encodage d’une URL à l’aide de la méthode encodeURIComponent() en JavaScript

Un encodage d’URL est un processus d’encodage de caractères 8 bits à l’intérieur de l’URL avec % suivi d’un caractère hexadécimal. Il est également connu sous le nom de codage en pourcentage puisque nous remplaçons les caractères par un signe de pourcentage. Un encodage d’URL peut être effectué à l’aide de presque tous les langages de programmation, y compris JavaScript.

La raison derrière le codage d’une URL est qu’une URL ne peut contenir que des caractères spécifiques de la table ASCII. Tous les autres caractères présents à l’intérieur de l’URL doivent être encodés pour que l’URL fonctionne correctement. Les caractères à encoder dans une URL sont ':', '/', '?', '#', '[', ']', '@', '!', '$', '&', "'", '(', ')', '*', '+', ',', ';', '=', ainsi que '%'. Pour plus d’informations sur ces caractères et leur forme d’encodage, vous pouvez visiter ce lien.

Quelle est la différence entre l’URI et l’URL ?

Avant d’aller de l’avant, commençons par comprendre l’URI et l’URL.

Un Uniform Resource Identifier (URI) est utilisé pour identifier une ressource sur Internet. En revanche, Uniform Resource Locator (URL) est quelque chose qui vous aide à localiser et à atteindre cette ressource.

Un URI peut également être un identifiant ainsi qu’un localisateur, alors qu’une URL ne peut être qu’un localisateur. Une URL se trouve sous URI ; par conséquent, ils semblent tous les deux un peu similaires mais présentent des différences subtiles entre eux.

Par exemple, facebook.com est une URL car elle indique où se trouve la page Web de Facebook alors qu’un café à proximité peut être un URI car vous savez où se trouve le café (qui est une ressource) et vous savez également comment obtenir là (le chemin).

Encodage d’une URL à l’aide de la méthode encodeURI() en JavaScript

La méthode encodeURI() est l’une des méthodes permettant d’encoder une URL en JavaScript. Cette méthode peut être utilisée si vous avez une URL complète.

Disons que nous avons une URL en tant que https://en.wikipedia.org/[$q=english &language], et maintenant encodons cette URL en utilisant la méthode encodeURI() pour voir quelle sortie cette méthode fournit.

const URL = 'https://en.wikipedia.org/[$q=english &language]';
console.log(encodeURI(URL));

Production:

https://en.wikipedia.org/%5Bq=english%20&language%5D

Notez que cette méthode n’encode que très peu de caractères dans une URL, comme un espace blanc et des crochets.

Cette méthode n’encodera pas les caractères spéciaux suivants.

encodeURI() ` will not encode: ` ~!@#$ & * () =: /,;?+'

Si vous souhaitez encoder certains des autres caractères spéciaux, vous pouvez utiliser la méthode encodeURIComponent().

Encodage d’une URL à l’aide de la méthode encodeURIComponent() en JavaScript

La méthode encodeURIComponent() peut également être utilisée pour encoder une URL. Cette méthode peut être utilisée si vous n’avez qu’une partie d’une URL. Comme nous l’avons déjà vu, la méthode encodeURI() encode très peu de caractères, mais si vous souhaitez également encoder d’autres caractères, vous pouvez utiliser la méthode encodeURIComponent().

Prenons la même URL que nous avons prise plus tôt et voyons quelle sortie nous obtenons lorsque nous utilisons cette méthode pour encoder la chaîne.

const URL = 'https://en.wikipedia.org/[$q=english &language]';
console.log(encodeURIComponent(URL));

Production:

https%3A%2F%2Fen.wikipedia.org%2F%5B%24q%3Denglish%20%26language%5D

Comme vous pouvez le voir, cette méthode a encodé la majeure partie de l’URL.

Cette méthode n’encodera pas les caractères spéciaux suivants.

encodeURIComponent() ` will not encode: ` ~! * ()'

Selon vos besoins et votre utilisation, vous pouvez utiliser l’une ou les deux méthodes ci-dessus pour coder une URL en JavaScript.