Извлечение имени домена из строки в JavaScript

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

Если требуется преобразовать URL-адрес в имя хоста при помощи JavaScript, на помощь придет объект URL:

const hostname = new URL("http://www.example.com/page").hostname; // "www.example.com"

Свойство hostname напрямую возвращает доменное имя из URL. Обратите внимание, что в некоторых старых браузерах для поддержки данного API требуется полифил.

Более глубокое погружение: Решение проблем

Получение имени хоста через DOM

Если ваша работа связана с DOM, можно использовать следующее решение для получения имени хоста:

function getHostnameFromUrl(url) {
  const anchorElement = document.createElement('a');
  anchorElement.href = url;
  return anchorElement.hostname;  // Имя хоста успешно получено
}

Этот метод гармонично вписывается в ваш текущий рабочий процесс, особенно, если он связан с использованием jQuery или JavaScript для работы с DOM.

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

Обработка сложных URL

Сложности могут возникнуть при работе c URL, содержащими юникодные символы и нестандартные доменные зоны. Однако npm-пакет psl (Public Suffix List) придется кстати:

const psl = require('psl'); // Полезная основа для опытных Node.js-разработчиков!

function getDomainFromUrl(url) {
  const { hostname } = new URL(url);
  const parsed = psl.parse(hostname); // Обрабатываем сложные случаи
  return parsed.domain;
}

С его помощью успешно справится с различными структурами URL и особыми случаями.

Вопрос производительности

Когда скорость имеет решающее значение, особенно при работе с большим объемом данных, стоит использовать инструменты типа jsPerf для определения наиболее эффективного метода, включая регулярные выражения и парсинг URL.

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

Графическое представление извлечения имени хоста из URL-адреса:

🧍‍♂️🧍‍♀️🧍‍👤🧍‍👁️‍🗨️ 'https://example.com/path?query=123' 🕵️ -> 'example.com'

Давайте представим, что строка URL это бурно живущая улица, и среди массы других элементов нам нужно найти именно example.com:

| До извлечения               | После извлечения |
| --------------------------- | ----------------- |
| 🚶‍♂️🚶‍♀️🐕🚗🚕 'https://example.com' 🚚🚜🛴 |      'example.com'       |

С помощью метафорического бинокля (🔍) мы без труда обнаруживаем нужного нам "персонажа" на улице.

Регулярное выражение: Знакомый инструмент?

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

function extractHostname(url) {
  const regex = /^(?:https?:\/\/)?(?:www\.)?([^\/\n]+)/i; 
  const matches = url.match(regex);
  return matches && matches[1];  // Нашли нужное
}

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

Учет совместимости с браузерами

В старых версиях браузеров объект URL может быть недоступен. В таком случае можно использовать базовые методы работы со строками, такие как .split и .slice.

Пользовательская функция: к области специфического применения

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

function extractRootDomain(url) {
  let domain = new URL(url).hostname;
  let parts = domain.split('.').reverse(); 

  if (parts.length > 2) {
    domain = `${parts[1]}.${parts[0]}`; // Собираем главный домен
  }
  return domain;  // Готовый результат
}

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

1. URL – Веб API | MDN — Подробное руководство по API URL от MDN Web Docs.
2. Метод JavaScript String split() — Детальное описание метода split() для строк на JavaScript от W3 Schools.
3. Разбор URI с помощью Javascript · GitHub — Пример анализа URL на GitHub Gist.
4. Свойство Window: location – Веб API | MDN — Руководство по свойству Window.location от MDN.
5. RegExr: Изучаем, создаем и тестируем RegEx — Полезная онлайн-платформа для изучения и проверки регулярных выражений.
6. Получение URL и его составных частей в JavaScript | CSS-Tricks — Объяснение процесса извлечения элементов URL с помощью JavaScript на CSS-Tricks.