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