Доброго времени суток, друзья!
Представляю Вашему вниманию перевод заметки How to Parse URL in JavaScript: hostname, pathname, query, hash автора Dmitri Pavlutin.
Унифицированный указатель ресурса или, сокращенно, URL это ссылка на веб-ресурс (веб-страницу, изображение, файл). URL определяет местонахождения ресурса и способ его получения протокол (http, ftp, mailto).
Например, вот URL данной статьи:
https://dmitripavlutin.com/parse-url-javascript
Часто возникает необходимость получить определенные элементы URL. Это может быть название хоста (hostname,
dmitripavlutin.com) или путь (pathname,
/parse-url-javascript).Удобным способом получить отдельные компоненты URL является конструктор
URL().В этой статье мы поговорим о структуре и основных компонентах URL.
1. Структура URL
Изображение лучше тысячи слов. На представленном изображении Вы можете видеть основные компоненты URL:
2. Конструктор URL()
Конструктор
URL() это функция, позволяющая разбирать
(парсить) компоненты URL:
const url = new URL(relativeOrAbsolute [, absoluteBase])
Аргумент
relativeOrAbsolute может быть абсолютным или
относительным URL. Если первый аргумент относительная ссылка, то
второй аргумент, absoluteBase, является обязательным и
представляет собой абсолютный URL основу для первого аргумента.Например, инициализируем
URL() с абсолютным URL:
const url = new URL('http://example.com/path/index.html')url.href // 'http://example.com/path/index.html'
Теперь скомбинируем относительный и абсолютный URL:
const url = new URL('/path/index.html', 'http://example.com')url.href // 'http://example.com/path/index.html'
Свойство
href экземпляра URL() возвращает
переданную URL-строку.После создания экземпляра
URL(), Вы можете получить
доступ к компонентам URL. Для справки, вот интерфейс экземпляра
URL():
interface URL { href: USVString; protocol: USVString; username: USVString; password: USVString; host: USVString; hostname: USVString; port: USVString; pathname: USVString; search: USVString; hash: USVString; readonly origin: USVString; readonly searchParams: URLSearchParams; toJSON(): USVString;}
Здесь тип
USVString означает, что JavaScript должен
возвращать строку.3. Строка запроса (query string)
Свойство
url.search позволяет получить строку запроса
URL, начинающуюся с префикса ?:
const url = new URL( 'http://example.com/path/index.html?message=hello&who=world')url.search // '?message=hello&who=world'
Если строка запроса отсутствует,
url.search возвращает
пустую строку (''):
const url1 = new URL('http://example.com/path/index.html')const url2 = new URL('http://example.com/path/index.html?')url1.search // ''url2.search // ''
3.1. Разбор (парсинг) строки запроса
Вместо получения исходной строки запроса, мы можем получать ее параметры.
Легкий способ это сделать предоставляет свойство
url.searchParams. Значением данного свойства является
экземпляр интерфейса URLSeachParams.Объект
URLSearchParams предоставляет множество методов
для работы с параметрами строки запроса (get(param),
has(param) и т.д.).Давайте рассмотрим пример:
const url = new Url( 'http://example.com/path/index.html?message=hello&who=world')url.searchParams.get('message') // 'hello'url.searchParams.get('missing') // null
url.searchParams.get('message') возвращает значение
параметра message строки запроса.Доступ к несуществующему параметру
url.searchParams.get('missing') возвращает
null.4. Название хоста (hostname)
Значением свойства
url.hostname является название
хоста URL:
const url = new URL('http://example.com/path/index.html')url.hostname // 'example.com'
5. Путь (pathname)
Свойство
url.pathname содержит путь URL:
const url = new URL('http://example.com/path/index.html?param=value')url.pathname // '/path/index.html'
Если URL не имеет пути,
url.pathname возвращает символ
/:
const url = new URL('http://example.com/');url.pathname; // '/'
6. Хеш (hash)
Наконец, хеш может быть получен через свойство
url.hash:
const url = new URL('http://example.com/path/index.html#bottom')url.hash // '#bottom'
Если хеш отсутствует,
url.hash возвращает пустую
строку (''):
const url = new URL('http://example.com/path/index.html')url.hash // ''
7. Проверка (валидация) URL
При вызове конструктора
new URL() не только создается
экземпляр, но также осуществляется проверка переданного URL. Если
URL не является валидным, выбрасывается TypeError.Например,
http ://example.com не валидный URL,
поскольку после http имеется пробел.Попробуем использовать этот URL:
try { const url = new URL('http ://example.com')} catch (error) { error // TypeError, "Failed to construct URL: Invalid URL"}
Поскольку
'http ://example.com' неправильный URL, как
и ожидалось, new URL('http ://example.com')
выбрасывает TypeError.8. Работа с URL
Такие свойства, как
search, hostname, pathname, hash
доступны для записи.Например, давайте изменим название хоста существующего URL с
red.com на blue.io:
const url = new URL('http://red.com/path/index.html')url.href // 'http://red.com/path/index.html'url.hostname = 'blue.io'url.href // 'http://blue.io/path/index.html'
Свойства
origin, searchParams доступны только для
чтения.9. Заключение
Конструктор
URL() является очень удобным способом
разбора (парсинга) и проверки (валидации) URL в JavaScript.new URL(relativeOrAbsolute, [, absoluteBase] в
качестве первого параметра принимает абсолютный или относительный
URL. Если первый параметр является относительным URL, вторым
параметром должен быть абсолютный URL основа для первого
аргумента.После создания экземпляра
URL(), Вы можете получить
доступ к основным компонентам URL:-
url.searchисходная строка запроса -
url.searchParamsэкземплярURLSearchParamsдля получения параметров строки запроса -
url.hostnameназвание хоста -
url.pathnameпуть -
url.hashзначение хеша
