Извлечение доменного имени страницы в JavaScript: location.host

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

Чтобы выделить текущее название домена при помощи JavaScript, используйте свойство window.location.hostname.

Пример использования:

console.log(window.location.hostname);

Этот код выведет именно доменное имя, отсеив протоколы, пути и номера портов.

Детальный анализ и проблемные моменты

Если вам требуется настроить работу под конкретные домены в контексте, например, стилизации, редиректов или контента, то JavaScript отлично подойдет для этой задачи.

Анатомия объекта location

Объект window.location содержит полезные сведения о текущем URL. С использованием свойств host, hostname и origin можно настроить работу с доменом. Для получения имени домена без указания порта подходит свойство hostname.

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

Учет окружения

В зависимости от среды, будь то разработка, тестирование или продакшн, домены могут иметь разную структуру. Это касается и субдоменов, и доменов верхнего уровня, таких как .co.uk. При этом важно проверять, насколько эффективно ваши regex-шаблоны или методы работы со строками справляются с подобными задачами.

Меры безопасности

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

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

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

На нашем цифровом конверте написано (URL):

https://www.example.com/path/to/resource?query=string

Но нам нужен только адрес отправителя (доменное имя):

Инструмент для открытия конвертов (JavaScript):

// Открываем конверт
const domain = window.location.hostname;

И результат: 🏤✉️➡️ www.example.com

Прекрасно! Мы отсекли все лишнее и оставили только доменное имя!

Субдомены и домены: что к чему

Если ваш адрес выглядит как https://subdomain.example.co.uk, и вам нужно оставить только example.co.uk, не обращая внимания на subdomain, то может показаться, что задача сложная. Но реально ли это?

Regex приходит на помощь

Regex-шаблон прекрасно подойдет для выделения частей домена, учитывая при этом нюансы DNS:

// Как сказал Йода: "Делай или не делай, попыток не существует!"
const domainWithSuffix = window.location.hostname.match(/[\w-]+\.\w+$/);
console.log(domainWithSuffix ? domainWithSuffix[0] : 'Домен не найден');

Используем функцию для извлечения домена

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

// На помощь приходят извлекатели доменов!
function getDomain(url) {
  // Место для вашего кода
  return parsedDomain;
}

console.log(getDomain(window.location.href));

Не забывайте регулярно проводить проверки различных форматов URL и обновлять код, ведь стандарты доменов меняются. Капризы DNS требуют вашего внимания.

Путешествие по свойствам URL

Познакомимся с основными свойствами URL, которые предоставляет JavaScript:

• window.location.href вернет вам полный URL.
• window.location.protocol указывает, используется ли HTTP или HTTPS.
• Если вам нужен только путь, обратитесь к window.location.pathname.
• Свойство window.location.search отдает параметры запроса, а для фрагментов URL (части после #) доступно window.location.hash.

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

1. Window: location property – Web APIs | MDN — Официальная документация по объекту window.location.
2. JavaScript Window Location – W3Schools — Подробное руководство по window.location.
3. Get the current URL with JavaScript? – Stack Overflow — Дискуссия по теме извлечения доменного имени на Stack Overflow.
4. Get URL and URL Parts in JavaScript | CSS-Tricks — Сборник сниппетов для работы со строками URL.
5. Understanding the JavaScript Window Object — SitePoint – Подробное руководство по объекту Window в JavaScript.
6. JavaScript's location – freecodecamp — Глубокий анализ объекта location в JavaScript.