Как получить текущий URL через JavaScript: разбор под капотом

Как получить текущий URL через JavaScript: разбираемся с тем, что скрыто под капотом

Представьте: вы сидите за компьютером, открыли браузер, в адресной строке красуется длинная ссылка. Вы хотите, чтобы ваш скрипт на JavaScript «прочитал» эту ссылку, разобрал её на части и сделал с ними что-то полезное. Знакомая ситуация? Ещё бы! Это один из самых популярных вопросов на Stack Overflow — «Get the current URL with JavaScript?» набрал сотни тысяч просмотров. Почему? Потому что без этой задачи не обходится ни один серьёзный проект: динамическая навигация, аналитика, формы, AJAX-запросы — везде нужно знать, где мы находимся.

В этой статье я не просто покажу вам магическую строчку window.location.href, а загляну под капот браузера. Вы узнаете, как устроен объект location, какие свойства он хранит, как безопасно парсить URL и какие подводные камни вас ждут. Поехали!

Знакомьтесь: объект window.location

Каждый раз, когда вы открываете веб-страницу, браузер создаёт специальный объект — window.location. Он живёт в глобальном пространстве имён и содержит всю информацию о текущем URL. Достаточно просто написать в консоли:

console.log(window.location);

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

• href — полная строка URL (например, https://pythonlib.ru/blog?page=2#comments).
• protocol — протокол (https: или http:).
• hostname — имя хоста (pythonlib.ru).
• port — порт (если не указан, то пустая строка).
• pathname — путь к файлу или странице (/blog).
• search — строка запроса (всё, что после ?, например ?page=2).
• hash — фрагмент ссылки (всё, что после #, например #comments).

Браузер автоматически обновляет эти свойства при переходе по ссылке или изменении адресной строки. Вы не можете их просто так перезаписать (ну, почти — об этом позже), но можете читать сколько угодно.

Как получить полный URL: самый простой способ

Если вам нужна вся строка целиком, используйте свойство href:

const currentUrl = window.location.href;
console.log(currentUrl);
// Вывод: "https://pythonlib.ru/blog?page=2#comments"

Это «золотой стандарт». Он работает во всех браузерах, включая Internet Explorer (да, он ещё жив в некоторых корпоративных сетях). Запомните его как универсальный ответ на вопрос «как получить текущий URL в JavaScript».

Разбираем URL на части: зачем это нужно?

Допустим, вы пишете интернет-магазин. Вам нужно понять, какие параметры переданы в строке запроса: ?category=books&sort=price. Или вы хотите плавно прокрутить страницу к элементу с якорем #reviews. Просто взять href — мало. Нужно разобрать его на составляющие.

Самый надёжный способ в современном JavaScript — использовать конструктор URL:

const url = new URL(window.location.href);
console.log(url.searchParams.get('category')); // "books"
console.log(url.hash); // "#reviews"

Объект URL даёт доступ к удобному методу searchParams — это настоящий парсер строки запроса. Вы можете получать, добавлять и удалять параметры без ручного разбиения строки. Под капотом он использует те же свойства window.location, но предоставляет более чистый API.

Под капотом: как браузер обрабатывает URL

Когда вы вводите адрес в строку браузера, происходит целая цепочка событий. Браузер разбирает строку на компоненты, используя алгоритм, описанный в спецификации WHATWG URL Standard. Выглядит это примерно так:

1. Определяется схема (protocol) — http, https, file и т.д.
2. Если схема не указана, браузер пытается угадать (например, добавляет http://).
3. Выделяется хост (hostname) и порт.
4. Путь (pathname) нормализуется: удаляются лишние слеши, обрабатываются относительные ссылки.
5. Строка запроса (search) кодируется в процентное представление (percent-encoding).
6. Фрагмент (hash) не отправляется на сервер, а используется только на клиенте.

Интересный факт: свойство window.location.href не просто строка. Это на самом деле геттер, который каждый раз собирает URL заново из отдельных компонентов. Поэтому если вы измените, например, location.hash, то при следующем чтении location.href вы получите уже обновлённую строку.

Меняем URL без перезагрузки страницы

А теперь самое интересное. С помощью JavaScript вы можете не только читать URL, но и изменять его, не перезагружая страницу. Это делается через объект history и методы pushState или replaceState. Но есть и более простой путь — напрямую менять свойства location.

Например, если вы хотите добавить якорь к текущей странице:

window.location.hash = 'section2';

Это изменит URL без перезагрузки. Браузер автоматически прокрутит страницу к элементу с id="section2", если он есть. А если вы хотите полностью перенаправить пользователя на другой адрес, просто присвойте новое значение href:

window.location.href = 'https://pythonlib.ru/new-page';

Но будьте осторожны: это вызовет полную перезагрузку страницы. Если нужно обновить только строку запроса, лучше использовать pushState:

const url = new URL(window.location.href);
url.searchParams.set('mode', 'edit');
window.history.pushState({}, '', url);

Так вы измените URL в адресной строке, но страница не перезагрузится. Это идеально для одностраничных приложений (SPA).

Ловушки и подводные камни

Казалось бы, что может пойти не так? На практике — несколько вещей:

• Безопасность. Никогда не вставляйте полный URL напрямую в HTML-атрибуты (например, src или href) без кодирования. Это открывает путь для XSS-атак. Всегда используйте encodeURI() или encodeURIComponent().
• Кодировка. Если в URL есть кири