Извлечение части пути URL в JavaScript: решение без jQuery

Быстрый ответ

Для извлечения определённого сегмента из пути URL в JavaScript используйте свойство window.location.pathname и метод split:

const segment = window.location.pathname.split('/')[1]; // Получаем первый сегмент пути

Разбиваем строку на подстроки по символу /, получая таким образом массив сегментов. Через индекс [1] вызываем первый сегмент (индексируем с 1 из-за ведущего слеша). Для выбора другого сегмента замените n в индексе [n].

Извлечение пути URL с помощью якоря

Если необходима работа с URL, которые не привязаны напрямую к текущему домену, можно создать временный якорный элемент:

const a = document.createElement('a');
a.href = 'http://example.com/page/subpage?query#hash';
const path = a.pathname.split('/')[1]; // Получаем 'page', ключевой сегмент нашего URL

Взаимодействие с URL через регулярные выражения

Регулярные выражения — это реальная жемчужина для работы со сложными структурами URL:

const url = 'http://example.com/page/subpage?query#hash';
const pathMatch = /^[^:]+:\/\/(?<domain>[^\/]+)(?<path>\/[^?#]*)(?:[?#]|$)/.exec(url);
const path = pathMatch.groups.path.split('/')[1]; // Как будто мы выбирали 'page' из множества возможных вариантов

В данном случае метод работы напоминает работу детектива, вычленяющего нужные факты из путаницы улик.

Использование URLUtils

URLUtils — это вам как верный спутник, обеспечивающий надёжный и консистентный доступ к каждому компоненту URL.

Практика работы с URL API

В современном JavaScript работа с URL упрощена благодаря конструктору URL():

const url = new URL('http://example.com/page/subpage?query#hash');
const segment = url.pathname.split('/')[1]; // Легким движением получаем нужный сегмент

Этот инструмент обрабатывает всю сложную процедуру разбора URL, предлагая простой и удобный доступ к его свойствам.

Визуализация

Представьте URL в виде поезда, где каждый сегмент пути — это отдельный вагон:

URL (поезд): 🚂🚃[сегмент1]🚃[сегмент2]🚃[сегмент3]...

Извлечение сегментов из пути URL — это как выбор нужного вагона:

| Действие                                    | Символ | Результат           |
| ------------------------------------ | ------ | ------------------- |
| Выбрать первый сегмент (первый вагон)      | 🛤️👉    | 🚃[сегмент1]        |
| Получить второй и третий сегменты (вагоны) | 🛤️👉    | 🚃[сегмент2]🚃[сегмент3] |

Такой подход помогает наглядно понять, как важно корректно определить нужную часть в структуре URL.

Руководство по специальным случаям

Декодирование компонентов URL

В путях URL нередко встречаются закодированные символы. Для их декодирования используйте decodeURIComponent():

const decodedSegment = decodeURIComponent('/page%20one'); // 'page one'

Подробнее об этом расскажет наш спикер на видео

Обработка завершающих слешей

Будьте внимательны с URL, которые оканчиваются на /, поскольку это может повлиять на результат:

const url = 'http://example.com/page/';
const pathSegments = url.pathname.split('/').filter(Boolean); // Исключаем пустые элементы, порождённые слешами

Функция filter(Boolean) помогает отфильтровать лишние пустые строки.

Информация о строках запроса и хешах

Не забывайте про строки запроса и хеши, которые требуют отдельного учёта:

const queryString = url.search;
const hashString = url.hash;

Использование инструментов разработки браузера

Проверка методов работы с URL на совместимость невероятно важна, ведь свойства, такие как window.location.port, могут варьироваться в различных браузерах. Для проверки рекомендуется использование встроенных в браузер инструментов разработки.

Хранение сегментов пути URL

Для поддержания кода чистым и читабельным сохраняйте сегменты пути в отдельных переменных:

const [,, subpage] = window.location.pathname.split('/'); // Пропускаем ненужный первый сегмент

Полезные материалы

1. Window: свойство location – Веб-API | MDN — всестороннее руководство по свойству window.location для работы с URL в JavaScript.
2. Как получить значения строки запроса в JavaScript? – Stack Overflow — дискуссия про методы работы со строкой запроса.
3. Свойство Location href — обзор свойства href, являющегося отправной точкой для анализа URL.
4. URL: свойство pathname – Веб-API | MDN — детальное описание свойства pathname в интерфейсе URL.

5. Метод split() для строк в JavaScript — урок по методу split, который незаменим при парсинге URL.

6. Получение параметров строки запроса с помощью JavaScript — статья Дэвида Уолша о различных способах работы со строками запросов в JavaScript.