Praca z URL w JavaScript

W JavaScript czasami trzeba pracować z adresami linków. W tym celu przeznaczona jest klasa URL, pozwalająca uzyskiwać i zmieniać części adresów.

Przyjrzyjmy się pracy z nią na przykładzie następującego adresu:

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

Stwórzmy obiekt klasy URL, przekazując mu parametrem nasz adres:

javascriptlet url = new URL(path);

Przyjrzyjmy się, jakie właściwości ma stworzony obiekt.

Protokół

Za pomocą właściwości protocol można uzyskać protokół:

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

Host

Za pomocą właściwości host można uzyskać nazwę domeny z portem:

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

Nazwa hosta

Za pomocą właściwości hostname można uzyskać nazwę domeny:

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

Port

Za pomocą właściwości port można uzyskać port:

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

Ścieżka

Za pomocą właściwości pathname można odrzucić nazwę domeny, uzyskując ścieżkę:

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

Hash

Za pomocą właściwości hash można uzyskać wartość hasha:

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

Parametry GET

Za pomocą właściwości search można uzyskać ciąg parametrów GET:

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

Za pomocą właściwości searchParams można uzyskać parametry GET w postaci obiektu klasy URLSearchParams:

javascriptlet res = url.searchParams;
console.log(res); // wypisze obiekt klasy URLSearchParams