Извлечение хоста из URL с помощью JavaScript: надёжный метод

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

Чтобы извлечь имя хоста в JavaScript, воспользуйтесь конструктором new URL() и свойством .hostname:

let url = new URL('https://www.example.com');
let hostname = url.hostname;  // 'www.example.com'

Этот метод отличается простотой, обладает хорошей поддержкой в различных браузерах и при этом не требует использования регулярных выражений.

Раскрывая структуру URL

Чтобы освоить методы извлечения имени хоста, давайте подробнее рассмотрим составляющие URL:

• Протокол: http или https.
• Hostname: то, что мы ищем – доменное имя.
• Порт: существенный компонент, при этом не всегда присутствует, номер TCP-порта.
• Pathname: путь к файлу или каталогу после доменного имени.
• Search: начинается с символа ? – это строка запроса.
• Hash: идентификатор фрагмента, начинающийся с #, который часто игнорируется, но важен.

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

Типовые ситуации и решения

Извлечение имени хоста текущей страницы

Чтобы обратиться к имени хоста текущей страницы, можно воспользоваться объектом window.location:

let hostname = window.location.hostname; // Понимание себя также важно!

Обратите внимание, что window.location.host вернёт имя хоста вместе с портом, если он указан, тогда как .hostname возвращает только имя хоста.

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

Разбор строки с URL

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

let hostname;
try {
  hostname = new URL('https://www.example.com').hostname; // Просто, как два плюс два.
} catch (error) {
  console.error('Некорректный URL. Бывает у каждого.');
}

Регулярные выражения для смельчаков

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

let regex = /^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n?]+)/im;
let matches = regex.exec('https://www.example.com');
let hostname = matches && matches[1]; // Когда звёзды находятся в созвездии...

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

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

Можно вообразить URL как фрукт, а имя хоста — как его семя:

URL: [протокол]//[имя_хоста]/[путь]?[запрос]#[фрагмент]

Чтобы извлечь семя (имя хоста):

var url = new URL("https://www.example.com/path?query#fragment");
var seed = url.hostname;  // 🌱

Здесь ваша наглядная аналогия:

🍒 -> 🌱
URL -> Имя хоста (Семя)

Руководство по разбору

Кроссбраузерность

Важно удостовериться, что выбранный вами метод работает одинаково эффективно в разных браузерах. Объект URL хорошо поддерживается большинством современных браузеров, но бывает полезной дополнительная проверка. Доверяй, но проверяй!

Декомпозиция нестандартных портов

Работая с URL, которые включают нестандартные порты, важно использовать свойство .hostname, чтобы извлечь только имя хоста:

hostname = new URL('https://www.example.com:8080/path?query').hostname; // 'www.example.com', без ненужных портов!

Удаление лишних элементов URL

Чистое извлечение имени хоста предполагает удаление всех ненужных частей URL:

const hostname = new URL('https://www.example.com/path?query').hostname; // 'www.example.com'

Обработка нестандартных URL

Если вам необходимо работать с нестандартными URL, объект URL сможет обработать относительные протоколы (//www.example.com) и URL без явно указанного протокола:

const hostname = new URL('//www.example.com', window.location.origin).hostname; // 'www.example.com', все гениальное – просто!

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

1. URL: Свойство hostname – Веб API | MDN — Здесь доступна полная информация о свойстве hostname веб API URL.
2. URL – Веб API | MDN — Обзорная статья по теме веб API URL.
3. JavaScript – Как извлечь имя хоста из строки – Stack Overflow — Познакомьтесь с другими методами разбора URL, предложенными сообществом.
4. JavaScript Window Location — Здесь подробно рассказывается о window.location и его возможностях.
5. Объекты URL — Описываются различные аспекты работы с URL в JavaScript.
6. URL | Документация Node.js v21.6.1 — Подход Node.js к разбору URL.
7. URI.js: Библиотека JavaScript для работы с URL — Полезная библиотека для операций с URL в JavaScript.