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