Работа с URL в JavaScript

В JavaScript понякога се налага да работим с адреси на връзки. За това е предназначен класът URL, който позволява получаване и промяна на части от адресите.

Нека разгледаме работата с него на примера на следния адрес:

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

Нека създадем обект от клас URL, като му подадем нашето адрес като параметър:

let url = new URL(path);

Нека разгледаме какви свойства има създадения обект.

Протокол

С помощта на свойството protocol можем да получим протокола:

let res = url.protocol;
console.log(res); // ще изведе 'http://'

Хост

С помощта на свойството host можем да получим домейн името с порта:

let res = url.host;
console.log(res); // ще изведе 'site.ru:3000'

Име на хоста

С помощта на свойството hostname можем да получим домейн името:

let res = url.hostname;
console.log(res); // ще изведе 'site.ru'

Порт

С помощта на свойството port можем да получим порта:

let res = url.port;
console.log(res); // ще изведе '3000'

Път

С помощта на свойството pathname можем да отрежем домейн името, получавайки пътя:

let res = url.pathname;
console.log(res); // ще изведе '/dir/eee/page.html#show?a=1&b=2&c=3'

Хеш

С помощта на свойството hash можем да получим стойността на хеша:

let res = url.hash;
console.log(res); // ще изведе 'show'

GET параметри

С помощта на свойството search можем да получим низа от GET параметрите:

let res = url.search;
console.log(res); // ще изведе 'a=1&b=2&c=3'

С помощта на свойството searchParams можем да получим GET параметрите под формата на обект от клас URLSearchParams:

let res = url.searchParams;
console.log(res); // ще изведе обект от клас URLSearchParams