Парсинг URL-адреса в JavaScript: имя хоста, путь, запрос, хеш

От автора: унифицированный указатель ресурса, сокращенно URL, является ссылкой на веб-ресурс (веб-страницу, изображение, файл). URL-адрес указывает местоположение ресурса и механизм его получения (http, ftp, mailto).

Например, вот URL этого поста в блоге: https://dmitripavlutin.com/parse-url-javascript.

Часто вам нужно получить доступ к определенным компонентам URL. Это может быть имя хоста (например dmitripavlutin.com) или путь (например /parse-url-javascript). Удобным парсером для доступа к компонентам URL является конструктор URL().

В этом посте я собираюсь показать вам структуру 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. Строка запроса

Свойство 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. Это свойство содержит экземпляр URLSearchParams.

Объект 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 параметра запроса — ‘hello’. Однако доступ к несуществующему параметру url.searchParams.get(‘missing’) оценивается как null.

4. Имя хоста

Свойство url.hostname содержит имя хоста URL-адреса:

const url = new URL('http://example.com/path/index.html'); url.hostname; // => 'example.com'

5. Путь

Свойство 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. Хеш

Наконец, к хешу можно получить доступ через свойство url.hash:

const url = new URL('http://example.com/path/index.html#bottom'); url.hash; // => '#bottom'

Если хеш в URL отсутствует, 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-адресами

Помимо доступа к компонентам URL-адреса, такие свойства, как search, hostname, pathname, hash являются записываемые — таким образом вы можете манипулировать URL-адресами. Например, давайте изменим имя хоста существующего 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 экземпляра URL() являются только для чтения. Все остальные доступны для записи и изменяют URL при их перезаписывании.

9. Заключение

Конструктор URL() удобен для парсинга (и проверки) URL-адреса в JavaScript. new URL(relativeOrAbsolute [, absoluteBase]) принимает в качестве первого аргумента абсолютный или относительный URL-адрес. Когда первый аргумент является относительным, вы должны указать второй аргумент как абсолютный URL, который служит основой для первого аргумента.

После создания экземпляра URL() вы можете легко получить доступ к наиболее распространенным компонентам URL, таким как:

Автор: Dmitri Pavlutin

Источник: https://dmitripavlutin.com

Редакция: Команда webformyself.