Разбор URL на домен и путь в JavaScript: примеры кода

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

Чтобы сегментировать URL на имя хоста и путь, воспользуйтесь встроенным в JavaScript объектом URL:

const url = new URL('http://www.example.com/path');
console.log(url.hostname); // Выведет 'www.example.com'
console.log(url.pathname); // Выведет '/path'

Таким образом, вы сможете просто извлечь нужные вам компоненты.

Обработка относительных URL

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

const url = new URL('/path', 'http://www.example.com');
console.log(url.hostname); // Отобразит 'www.example.com'
console.log(url.pathname); // Отобразит '/path'

Таким образом, вы получите абсолютный URL, не рискуя потерять относительную ссылку.

Глубже в составляющие

URL состоит из многих частей, и помимо имени хоста и пути, вы можете извлечь еще и протокол, порт, параметры запроса и даже фрагменты хеша:

const url = new URL('http://www.example.com:80/path?query=123#hash');
console.log(url.protocol); // Отобразит 'http:'
console.log(url.host);     // Отобразит 'www.example.com:80'
console.log(url.port);     // Отобразит '80'
console.log(url.search);   // Отобразит '?query=123'
console.log(url.hash);     // Отобразит '#hash'

Другой путь к пониманию: элемент якоря

Если вы работаете с устаревшими браузерами, то DOM-элемент <a> может стать хорошей альтернативой:

const anchor = document.createElement('a');
anchor.href = 'http://www.example.com/path';
console.log(anchor.hostname); // 'www.example.com'
console.log(anchor.pathname); // '/path'

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

В случаях, когда DOM-методы не могут быть использованы, обратитесь к регулярным выражениям:

const regex = /^(https?):\/\/([^\/\s]+)(\/\S*)?$/;
const matches = 'http://www.example.com/path'.match(regex);
console.log(matches[1]); // 'http'
console.log(matches[2]); // 'www.example.com'
console.log(matches[3]); // '/path'

Не забывайте тестировать регулярное выражение на разнообразии форматов URL.

Обеспечение совместимости кода с различными браузерами

Проверяйте код на совместимость с разнообразием браузеров. Если объект URL не поддерживается, замените его эмуляцией через <a> или регулярными выражениями.

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

Смотрите на URL как на поезд:

Поезд (🚂): [Протокол]://[ИмяХоста]/[Путь]

Используйте следующую функцию для анализа URL:

const examineTicket = (url) => {
  const { hostname, pathname } = new URL(url);
  return { hostname, pathname };
};

Демонстрация работы анализа URL:

Этот URL:
"🎟️": "http://example.com/path/to/resource"

Результат анализа:
"🚂 Пункт назначения": {
  "Станция хоста": "example.com",
  "Трасса пути": "/path/to/resource"
}

Ни один пассажир не останется забытым: параметры запроса

URL может содержать множество параметров запроса:

const url = new URL('http://example.com/train?passenger=John&seat=22');
console.log(url.searchParams.get('passenger')); // 'John'
console.log(url.searchParams.get('seat'));      // '22'

Использование объекта URL значительно упрощает работу с параметрами.

Умение обращаться с параметрами URL

Итерация по параметрам — это своего рода считалка:

for (const [key, value] of url.searchParams) {
  console.log(`${key}: ${value}`);
}

Теперь вы осведомлены о каждом параметре вашего URL.

Выбор стратегии разбора

Выбирайте метод разбора URL, исходя из контекста:

• Современные браузеры и Node.js: Пользуйтесь объектом URL.
• В случае поддержки устаревших браузеров: Пользуйтесь элементом <a>.
• Вне браузерного окружения: Применяйте регулярные выражения.

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

1. URL – Веб-API | MDN — подробности о веб-API URL на MDN.
2. Node.js v21.6.1 Документация — использование URL модуля в Node.js.
3. URI.js – URL в JavaScript — библиотека JavaScript для работы с URL.
4. Как разделить URL на имя хоста и путь в javascript? – Stack Overflow — обсуждение разбора URL в JavaScript.
5. HTML Standard — стандарт HTML для анализа URL.
6. Получение URL и его компонент в JavaScript | CSS-Tricks — подходы к разбору URL в JavaScript.
7. parse-url – npm — пакет NPM для разбора URL в Node.js.