Удаление параметров из URL в JavaScript: window.location.href

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

Если нам нужно быстро и легко очистить URL от параметров запроса, можно слить воедино window.location.origin и window.location.pathname:

const cleanUrl = `${window.location.origin}${window.location.pathname}`;
console.log(cleanUrl);  // выводим исходный URL без параметров

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

Построение URL шаг за шагом

Рассмотрим, как собрать URL из его составных частей. Для этого нам пригодятся свойства location.protocol, location.host и location.pathname:

• location.protocol — определяет протокол передачи данных (например, http: или https:)
• location.host — указывает имя хоста и порт (как, например, example.com:80)
• location.pathname — показывает адрес ресурса на сервере (например, /index.html)

Объединив эти элементы, получим URL без параметров:

const protocol = location.protocol;
const host = location.host;
const path = location.pathname;
const mainUrl = `${protocol}//${host}${path}`;
console.log(mainUrl);  // вуаля — перед нами чистый URL

Это основной метод, основанный исключительно на встроенных в JavaScript возможностях.

Альтернативные подходы и нюансы

Возможности объекта URL

Специализированный объект URL, встроенный в JavaScript, идеально подходит для обработки параметров URL:

const url = new URL(window.location);
const baseUrl = url.origin + url.pathname;
console.log(baseUrl);  // вот наш исчерпывающий URL

Такой подход стандартизирует URL и облегчает задачу даже в сложных сценариях.

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

Осторожно: window.location.origin

Учтите, что использование window.location.origin может быть связано с риском – в старых версиях браузеров оно может функционировать непредсказуемо. Для обеспечения совместимости при формировании адреса лучше применять location.protocol и location.host:

const origin = `${location.protocol}//${location.host}`;
const baseUrl = `${origin}${location.pathname}`;
console.log(baseUrl);  // такой URL подойдёт даже для устаревших браузеров

Максимальная очистка URL

Если для вас критично наличие вопросительного знака в определенных местах URL, аккуратно удалите его:

const baseWithPotentialQuery = window.location.href.split('?')[0];
const cleanBaseUrl = baseWithPotentialQuery.endsWith('?') ? baseWithPotentialQuery.slice(0, -1) : baseWithPotentialQuery;
console.log(cleanBaseUrl);  // теперь адрес точно без параметров

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

На самом деле всё проще простого: можно представить URL как поезд, а параметры – как пассажиров:

Поезд (URL): 🚂========

Пассажиры (Параметры): 👩‍💼🧑‍🔬👨‍🍳

Чтобы получить поезд без пассажиров, достаточно просто их высадить:

const trainWithoutPassengers = window.location.href.split('?')[0];

Таким образом, мы получаем голый базовый URL — поезд без ненужных пассажиров:

🚂======== (Без лишних пассажиров!)

Теперь перед нами только суть адреса, без каких-либо лишних "пассажиров".

Полезные советы: особые случаи

Управляем URL-кодированием

Некоторые параметры могут быть закодированы в URL. Чтобы их раскодировать, используйте функцию decodeURIComponent, которая оправданно справляется с специальными символами:

const decodedUrl = decodeURIComponent(window.location.href);
const cleanDecodedUrl = decodedUrl.split('?')[0];
console.log(cleanDecodedUrl);  // декодирование успешно выполнено!

Библиотеки-помощники

Применение внешних библиотек, таких как URI.js, qs или Lodash, может быть полезно, если вы хотите усовершенствовать работу с URL:

// Пример использования библиотеки URI.js
const cleanUri = URI(window.location.href).search("").toString();
console.log(cleanUri);  // Спасибо, URI.js!

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

Регулярные выражения в действии

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

Полезные ресурсы

1. Window: свойство location – Web API | MDN — подробное руководство на MDN о использовании объекта location в JavaScript.
2. JavaScript – Получение части пути URL – Stack Overflow — полезные обсуждения и рекомендации для работы с URL в JavaScript.
3. JavaScript Window Location — урок от W3Schools о получении информации о текущем URL и перенаправлении пользователя на другую страницу.
4. Получение URL и его частей в JavaScript | CSS-Tricks — глубокое рассмотрение работы с различными частями URL на CSS-Tricks.
5. URL: конструктор URL() – Web API | MDN — документация MDN о конструкторе URL, помогающем в создании и модификации URL.
6. Как разобрать URL на hostname и путь в javascript? – Stack Overflow — интересные обсуждения на Stack Overflow о том, как разбирать URL для выделения имени хоста и пути.
7. URL: свойство searchParams – Web API | MDN — описание свойства searchParams, помогающем управлять параметрами строки запроса URL.