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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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