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");

властивості

методи

Переглядачі

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

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

Переглядач
	32	19	7	19	12	10

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

Переглядач
	4.4	32	19	7

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

Переглядач
	10.0.0	1.0

Приклади

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

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('Некоректна адреса');
}