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

Получение полного URL и его частей через объект window.location

Вы на правильном пути — объект window.location (или просто location) — это стандартный способ работы с URL в браузере. Чтобы получить полный адрес как строку, используйте свойство href:

// Полный URL страницы
let fullUrl = window.location.href;
console.log(fullUrl); // "https://example.com/page?name=test#section"

Разбор URL на составные части

Объект location содержит все нужные вам компоненты. Вот полный список полезных свойств:

• location.protocol — протокол (например, "https:" или "http:")
• location.hostname — домен (например, "example.com")
• location.port — порт (если указан, иначе пустая строка)
• location.host — домен + порт (например, "example.com:8080")
• location.pathname — путь после домена (например, "/page")
• location.search — строка запроса (включая "?", например "?name=test")
• location.hash — якорь (включая "#", например "#section")
• location.origin — протокол + домен + порт (например, "https://example.com")

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

Допустим, текущий URL: https://myshop.ru:3000/products?id=42&color=red#reviews. Вот как получить каждую часть:

console.log(location.protocol); // "https:"
console.log(location.hostname); // "myshop.ru"
console.log(location.port);     // "3000"
console.log(location.host);     // "myshop.ru:3000"
console.log(location.pathname); // "/products"
console.log(location.search);   // "?id=42&color=red"
console.log(location.hash);     // "#reviews"
console.log(location.origin);   // "https://myshop.ru:3000"
console.log(location.href);     // полный URL

Как получить параметры запроса (query-параметры) в удобном виде

Строку search можно разобрать с помощью URLSearchParams:

let params = new URLSearchParams(location.search);
let id = params.get('id');    // "42"
let color = params.get('color'); // "red"
console.log(id, color);

Важные замечания

• Объект location доступен в глобальной области видимости — писать window.location не обязательно, достаточно просто location.
• Свойство href можно не только читать, но и изменять — присвоив новое значение, вы переадресуете браузер на другой URL: location.href = 'https://google.com';
• Для получения только домена без порта используйте hostname, а не host.

let url = new URL(window.location.href);

// Все свойства доступны:
console.log(url.protocol);  // "https:"
console.log(url.hostname);  // "example.com"
console.log(url.pathname);  // "/page"

// Удобный доступ к query-параметрам:
let params = url.searchParams;
console.log(params.get('name')); // "test"

url.pathname = '/new-path';
url.searchParams.set('lang', 'ru');
console.log(url.href); // Новый URL с изменённым путём и параметром