JavaScript URL — розбір і складання адреси

URL розбирає адресу на частини — протокол, домен, порт, шлях, параметри, якір — і дозволяє їх безпечно змінювати.

правити

Загальний опис

Розбирати адресу регулярним виразом — класична помилка, з якої народжуються найгірші баги. Адреси мають забагато крайніх випадків: порт, кирилиця в домені, екранування, відносні шляхи.

URL робить це правильно, за стандартом. Він же вміє розв'язувати відносні посилання: другим аргументом передається база, і new URL('../page', base) дасть правильну абсолютну адресу.

Параметри рядка запиту доступні через властивість searchParams — це готовий URLSearchParams, і зміни в ньому одразу відбиваються в самій адресі.

правити

Порада

Найпростіша перевірка, чи рядок узагалі є адресою — обгорнути new URL(text) у try...catch: на сміття він чесно кидає помилку.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

const url = new URL("https://css.in.ua/css/properties?x=1");

властивості

методи

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
URL	32+	26+	7+	19+	12+	-

Підтримка: мобільні переглядачі

Переглядач
URL	32+	yes	yes	7+

Приклади

+ запропонувати свій приклад у пісочниці

const url = new URL('https://css.in.ua/css/property/gap?theme=dark#top');

console.log(url.hostname); // 'css.in.ua'
console.log(url.pathname); // '/css/property/gap'
console.log(url.hash);     // '#top'
console.log(url.searchParams.get('theme')); // 'dark'

// змінюємо параметр — адреса оновлюється сама
url.searchParams.set('theme', 'light');
console.log(url.href); // ...?theme=light#top

// відносне посилання від бази
console.log(new URL('../selector/has', url).href);

// перевірка, чи це взагалі адреса
try {
    new URL('не адреса');
} catch {
    console.log('Некоректна адреса');
}