Как разобрать URL на части
Короткий ответ
Объект URL разбирает адрес на части:
const url = new URL('https://shop.example.com:8080/catalog/tea?sort=price#reviews');
console.log(url.protocol);
console.log(url.hostname);
console.log(url.port);
console.log(url.pathname);
console.log(url.searchParams.get('sort'));
console.log(url.hash);Результат:
https:
shop.example.com
8080
/catalog/tea
price
#reviewsИзменение адреса
Части URL можно менять, а href вернёт обновлённый адрес:
const url = new URL('https://example.com/search?q=tea');
url.searchParams.set('q', 'green tea');
url.searchParams.set('page', '2');
console.log(url.href);Результат:
https://example.com/search?q=green+tea&page=2Относительный адрес
Второй аргумент — базовый адрес. Так относительные ссылки превращаются в полные:
console.log(new URL('../images/logo.png', 'https://example.com/blog/post/').href);Результат:
https://example.com/blog/images/logo.pngЧастая ошибка
new URL() выбрасывает ошибку для неполного адреса. Сначала проверьте его через URL.canParse():
console.log(URL.canParse('example.com/page'));
console.log(URL.canParse('https://example.com/page'));Результат:
false
trueФункции из этого ответа
- URL — Разбирает адрес на части и собирает его обратно.
- URLSearchParams — Читает и собирает параметры адреса (часть после ?).