Travailler avec les URL en JavaScript

En JavaScript, il est parfois nécessaire de travailler avec des adresses de liens. Pour cela, la classe URL est destinée, permettant d'obtenir et de modifier des parties des adresses.

Regardons son fonctionnement sur l'exemple de l'adresse suivante :

javascriptlet path = 'http://site.ru:3000/dir/eee/page.html#show?a=1&b=2&c=3';

Créons un objet de la classe URL, en lui passant notre adresse en paramètre :

javascriptlet url = new URL(path);

Voyons quelles propriétés possède l'objet créé.

Protocole

A l'aide de la propriété protocol, on peut obtenir le protocole :

javascriptlet res = url.protocol;
console.log(res); // affichera 'http://'

Hôte

A l'aide de la propriété host, on peut obtenir le nom de domaine avec le port :

javascriptlet res = url.host;
console.log(res); // affichera 'site.ru:3000'

Nom d'hôte

A l'aide de la propriété hostname, on peut obtenir le nom de domaine :

javascriptlet res = url.hostname;
console.log(res); // affichera 'site.ru'

Port

A l'aide de la propriété port, on peut obtenir le port :

javascriptlet res = url.port;
console.log(res); // affichera '3000'

Chemin

A l'aide de la propriété pathname, on peut ignorer le nom de domaine, en obtenant le chemin :

javascriptlet res = url.pathname;
console.log(res); // affichera '/dir/eee/page.html#show?a=1&b=2&c=3'

Hachage

A l'aide de la propriété hash, on peut obtenir la valeur du hachage :

javascriptlet res = url.hash;
console.log(res); // affichera 'show'

Paramètres GET

A l'aide de la propriété search, on peut obtenir la chaîne des paramètres GET :

javascriptlet res = url.search;
console.log(res); // affichera 'a=1&b=2&c=3'

A l'aide de la propriété searchParams, on peut obtenir les paramètres GET sous forme d'objet de la classe URLSearchParams :

javascriptlet res = url.searchParams;
console.log(res); // affichera un objet de la classe URLSearchParams