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 :

let 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 :

let 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 :

let 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 :

let 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 :

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

Port

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

let 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 :

let 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 :

let 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 :

let 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 :

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