Парсинг 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-адреса:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

2. Конструктор URL()

URL() — это функция конструктора, которая позволяет парсировать компоненты URL-адреса:

Аргумент relativeOrAbsolute может быть как абсолютным, так и относительным URL-адресом. Если первый аргумент является относительным, то второй аргумент absoluteBase является обязательным и должен быть абсолютным URL-адресом, являющимся основой для первого аргумента.

Например, давайте инициализируем URL() с абсолютным URL-адресом:

или объединим относительные и абсолютные URL-адреса:

Свойство href экземпляра URL() возвращает всю строку URL. После создания экземпляра URL() вы можете получить доступ к любому компоненту URL, представленному на предыдущем рисунке. Для справки вот интерфейс экземпляра URL():

где USVString выводит указания на строки при возврате в JavaScript.

3. Строка запроса

Свойство url.search обращается к строке запроса URL с префиксом ?:

Если строка запроса отсутствует, url.search вычисляется, как пустая строка »:

3.1 Парсинг строки запроса

Более удобным, чем доступ к необработанной строке запроса, является доступ к параметрам запроса. Простой способ выбора параметров запроса дает свойство url.searchParams. Это свойство содержит экземпляр URLSearchParams.

Объект URLSearchParams предоставляет множество методов (например get(param), has(param)) для доступа к параметрам строки запроса. Давайте рассмотрим пример:

url.searchParams.get(‘message’) возвращает значение message параметра запроса — ‘hello’. Однако доступ к несуществующему параметру url.searchParams.get(‘missing’) оценивается как null.

4. Имя хоста

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

5. Путь

Свойство url.pathname обращается к пути URL-адреса:

Если URL-адрес не содержит пути, свойство url.pathname возвращает символ косой черты /:

6. Хеш

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

Если хеш в URL отсутствует, url.hash вычисляется, как пустая строка »:

7. Проверка URL-адреса

Когда конструктор new URL() создает экземпляр, как побочный эффект, он также проверяет правильность URL-адреса. Если значение URL-адреса недействительно, генерируется TypeError. Например, http://example.comневерный URL из-за пробела после http. Давайте используем этот неверный URL для инициализации парсера:

Поскольку ‘http ://example.com’ неверный URL, как и ожидалось, new URL(‘http ://example.com’) выдает TypeError.

8. Манипулирование URL-адресами

Помимо доступа к компонентам URL-адреса, такие свойства, как search, hostname, pathname, hash являются записываемые — таким образом вы можете манипулировать URL-адресами. Например, давайте изменим имя хоста существующего URL-адреса с red.com на blue.io:

Обратите внимание, что свойства origin и searchParams экземпляра URL() являются только для чтения. Все остальные доступны для записи и изменяют URL при их перезаписывании.

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

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

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

url.search для необработанной строки запроса

url.searchParams для экземпляра URLSearchParams, чтобы выбрать параметры строки запроса

url.hostname для получения доступа к имени хоста

url.pathname для чтения пути

url.hash для определения значения хеша

Автор: Dmitri Pavlutin

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Full-Stack практика. Создание JavaScript блога

Создание веб-приложения с нуля на JavaScript, NodeJS, ExpressJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: