L'encodage et le décodage des URL en JavaScript sont essentiels pour le développement Web, en particulier lors des requêtes GET avec des paramètres de requête. Ce processus garantit que les caractères spéciaux des URL sont correctement interprétés par le serveur. Par exemple, les espaces sont convertis en %20 ou + dans les URL. Ce guide explique comment utiliser les fonctions JavaScript telles que encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() et unescape() pour un encodage et un décodage d'URL efficaces.

Exemple:

• Ouvrez www.google.com et rédigez une requête de recherche geeks pour geeks.
• Une fois les résultats de la recherche affichés, observez la barre d’URL du navigateur. L'URL du navigateur sera composée de %20 ou d'un signe + à la place de l'espace.
• L'URL s'affichera comme : https://www.google.com/search?q=geeks%20for%20geeks ou https://www.google.com/search?q=geeks+for+geeks

Note : Le navigateur a converti automatiquement les espaces en signes + ou %20.

Encoder une URL : L'encodage en Javascript peut être réalisé en utilisant :

Table des matières

• 1. JavaScript encodeURIFonction
• 2. Fonction JavaScript encodeURIComponent()
• 3. Fonction JavaScript escape()
• 1. Fonction JavaScript decodeURI()
• 2. Fonction JavaScript decodeURIComponent()
• 3. Fonction JavaScript unescape()
• 4. Module de chaîne de requête JavaScript

1. JavaScript encodeURIFonction

Le fonction encodeURI() est utilisé pour coder l’URI complet. Cette fonction code le caractère spécial à l'exception des caractères (, / ?: @ & = + $ #).

Syntaxe:

encodeURI( complete_uri_string );>

const url = 'https://www.google.com/search?q=geeks for geeks'; const encodedURL = encodeURI(url); console.log(encodedURL)>

https://www.google.com/search?q=geeks%20for%20geeks>

2. Fonction JavaScript encodeURIComponent()

Le Fonction encodeURIComponent() est utilisé pour coder certaines parties ou composants de l’URI. Cette fonction code les caractères spéciaux. De plus, il code les caractères suivants : , /? : @ & = + $ #

Syntaxe:

encodeURIComponent( uri_string_component );>

const component = 'geeks for geeks'; const encodedComponent = encodeURIComponent(component); console.log(encodedComponent);>

geeks%20for%20geeks>

3. Fonction JavaScript escape()

Fonction JavaScript escape() prend une chaîne comme paramètre unique et code la chaîne qui peut être transmise sur le réseau informatique prenant en charge les caractères ASCII. Le codage est le processus de conversion de texte brut en texte chiffré.

Syntaxe:

escape( string )>

Note: La fonction escape() encode uniquement les caractères spéciaux, cette fonction est obsolète.

Des exceptions: @ – + . /*_

inurl :.git/head

const url = 'https://www.google.com/search?q=geeks for geeks'; const encodedURL = encodeURI(url);// encoding using encodeURI console.log(encodedURL) console.log(' ' + escape(url)); //encoding using escape>

https://www.google.com/search?q=geeks%20for%20geeks https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks>

Décoder une URL

Le décodage en Javascript peut être réalisé en utilisant

1. Fonction JavaScript decodeURI()

Le fonction decodeURI() est utilisé pour décoder l'URI généré par encodeURI() .

Syntaxe:

decodeURI( complete_encoded_uri_string )>

Exemple : Cet exemple décrit le fonction decodeURI() de Javascript .

const url = 'https://www.google.com/search?q=geeks%20for%20geeks'; const decodedURL = decodeURI(url); console.log(decodedURL)>

https://www.google.com/search?q=geeks for geeks>

2. Fonction JavaScript decodeURIComponent()

Le Fonction decodeURIComponent() est utilisé pour décoder certaines parties ou composants de l'URI généré par encodeURIComponent().

Syntaxe:

decodeURIComponent( encoded_uri_string_component )>

Exemple : Cet exemple décrit le décoderURIComponent() de Javascript.

const component = 'geeks%20for%20geeks' const decodedComponent = decodeURIComponent(component); console.log(decodedComponent)>

geeks for geeks>

3. Fonction JavaScript unescape()

Cette fonction prend une chaîne comme paramètre unique et l'utilise pour décoder cette chaîne codée par la fonction escape(). La séquence hexadécimale de la chaîne est remplacée par les caractères qu'elle représente lors du décodage via fonction unescape().

Syntaxe:

unescape(string)>

Note: Cette fonction décode uniquement les caractères spéciaux, cette fonction est obsolète.

Des exceptions: @ – + . /*_

const url = 'https://www.google.com/search?q=geeks for geeks'; const encodedURL = encodeURI(url); console.log(encodedURL) console.log(escape(url)); console.log(decodeURI(encodedURL)); console.log(unescape(encodedURL));>

https://www.google.com/search?q=geeks%20for%20geeks https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks https://www.google.com/search?q=geeks for geeks https://www.google.com/search?q=geeks for ...>

4. Module de chaîne de requête JavaScript

Le module querystring fournit des utilitaires pour analyser et formater les chaînes de requête d'URL. Il peut être utilisé pour encoder et décoder les composants d’URL.

Encoder une URL :

Pour encoder une URL, nous pouvons utiliser la fonction querystring.stringify() pour créer une chaîne de requête à partir d'un objet, puis utiliser encodeURIComponent() pour encoder la chaîne résultante.

const querystring = require('querystring'); const urlParams = {  q: 'geeks for geeks',  page: 1,  sort: 'desc' }; const encodedURL = 'https://www.google.com/search?' + querystring.stringify(urlParams); console.log(encodedURL);>

Sortir:

https://www.google.com/search?q=geeks%20for%20geeks&page=1&sort=desc>

Décoder une URL :

Pour décoder une URL, nous pouvons utiliser la fonction querystring.parse() pour analyser la chaîne de requête en un objet, puis accéder aux valeurs décodées.

const decodedParams = querystring.parse('q=geeks%20for%20geeks&page=1&sort=desc'); console.log(decodedParams.q); // Output: geeks for geeks console.log(decodedParams.page); // Output: 1 console.log(decodedParams.sort); // Output: desc>

Différence decodeURIComponent et decodeURI :

L'encodage et le décodage d'URL en JavaScript sont cruciaux pour un développement Web fluide. En utilisant des fonctions telles que encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent() et unescape(), les développeurs peuvent garantir que leurs URL sont correctement formatées et lisibles par les serveurs. Cette compétence est essentielle pour gérer les paramètres de requête dans les requêtes GET et garantit une expérience utilisateur fluide sur votre site Web.