Как получить текущий URL страницы с помощью JavaScript? (полный путь, хост, протокол)

Как получить текущий URL и его части с помощью JavaScript

Отличный вопрос! Ты уже на правильном пути. Давай разберёмся подробно. Основной объект для работы с URL — это window.location (или document.location — это одно и то же, оба ссылаются на один объект). Он содержит все части URL в виде свойств.

1. Полный URL

console.log(window.location.href);
// Результат: "https://example.com:8080/blog/article?id=5&page=2#section"

2. Разбираем URL по частям

Вот все основные свойства объекта location:

• protocol — протокол с двоеточием: "https:"
• hostname — домен: "example.com"
• port — порт (если нестандартный): "8080"
• host — домен + порт: "example.com:8080"
• pathname — путь от корня: "/blog/article"
• search — параметры запроса с вопросительным знаком: "?id=5&page=2"
• hash — хеш с решёткой: "#section"
• origin — протокол + хост (полезно для CORS): "https://example.com:8080"

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

function parseCurrentURL() {
    const loc = window.location;
    
    console.log("Протокол:", loc.protocol);           // "https:"
    console.log("Домен:", loc.hostname);               // "example.com"
    console.log("Порт:", loc.port || "стандартный");   // "" или "8080"
    console.log("Хост целиком:", loc.host);            // "example.com:8080"
    console.log("Путь:", loc.pathname);                // "/blog/article"
    console.log("Параметры:", loc.search);             // "?id=5&page=2"
    console.log("Хеш:", loc.hash);                     // "#section"
    console.log("Origin:", loc.origin);                // "https://example.com:8080"
}

parseCurrentURL();

4. Как получить параметры запроса в виде объекта

Часто нужно работать с параметрами как с объектом. Для этого используй URLSearchParams:

const params = new URLSearchParams(window.location.search);
console.log(params.get('id'));     // "5"
console.log(params.get('page'));   // "2"

// Получить все параметры
params.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});
// Выведет: id: 5, page: 2

5. Разница между window.location и document.location

Строго говоря, document.location — это устаревшее свойство, но оно всё ещё работает. На практике оба возвращают один и тот же объект. Рекомендуется использовать window.location, так как оно более явно указывает на глобальный объект окна.

6. Важные моменты

• Если URL не содержит порта, свойство port вернёт пустую строку.
• Свойство origin доступно не во всех старых браузерах (IE не поддерживает), но в современных всё отлично.
• Не путай href (полная строка) и host (только домен с портом).

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

// Получаем текущий URL
const currentUrl = new URL(window.location.href);

console.log(currentUrl.protocol);   // "https:"
console.log(currentUrl.hostname);   // "example.com"
console.log(currentUrl.pathname);   // "/blog/article"
console.log(currentUrl.search);     // "?id=5&page=2"
console.log(currentUrl.hash);       // "#section"

// Работа с параметрами (тот же URLSearchParams)
const params = currentUrl.searchParams;
console.log(params.get('id'));      // "5"

const link = document.querySelector('a').href;
const parsedLink = new URL(link);
console.log(parsedLink.hostname);