Lavorare con gli URL in JavaScript

In JavaScript a volte è necessario lavorare con gli indirizzi dei link. A questo scopo è stata creata la classe URL, che permette di ottenere e modificare parti degli indirizzi.

Vediamo come funziona con il seguente esempio di indirizzo:

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

Creiamo un oggetto della classe URL, passandogli come parametro il nostro indirizzo:

javascriptlet url = new URL(path);

Diamo un'occhiata alle proprietà dell'oggetto creato.

Protocollo

Utilizzando la proprietà protocol è possibile ottenere il protocollo:

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

Host

Utilizzando la proprietà host è possibile ottenere il nome del dominio con la porta:

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

Nome host

Utilizzando la proprietà hostname è possibile ottenere il nome del dominio:

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

Porta

Utilizzando la proprietà port è possibile ottenere la porta:

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

Percorso

Utilizzando la proprietà pathname è possibile rimuovere il nome del dominio, ottenendo il percorso:

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

Hash

Utilizzando la proprietà hash è possibile ottenere il valore dell'hash:

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

Parametri GET

Utilizzando la proprietà search è possibile ottenere la stringa dei parametri GET:

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

Utilizzando la proprietà searchParams è possibile ottenere i parametri GET sotto forma di oggetto della classe URLSearchParams:

javascriptlet res = url.searchParams;
console.log(res); // visualizzerà un oggetto della classe URLSearchParams