Удаление определённого get параметра с помощью JavaScript

Веб‑страницы часто используют GET‑параметры в URL для передачи данных: фильтры, сортировка, пагинация и многое другое. Иногда возникает необходимость удалить один конкретный параметр, не трогая остальные. JavaScript позволяет сделать это динамично без перезагрузки страницы или с обновлением URL.

В этой статье разберём, как это делается, когда это полезно и как применять код в реальных задачах.

Когда может понадобиться удаление GET‑параметра

Удаление параметров актуально в ситуациях:

• очистка параметров фильтра после сброса формы;
• удаление временных маркеров (например, ?ref=xyz);
• корректировка URL после изменения состояния страницы;
• упрощение URL перед пересылкой.

Работа с объектом URL в JavaScript

Современный JavaScript предоставляет удобный интерфейс для работы с URL — объект URL и его свойство searchParams. Они позволяют легко читать, добавлять, удалять и изменять GET‑параметры.

Удаление одного параметра

Допустим, нужно удалить из URL параметр utm_source:

const url = new URL(window.location.href);
url.searchParams.delete('utm_source');
window.history.replaceState(null, '', url.toString());

Пояснение:

1. new URL(window.location.href) — создаёт объект текущего URL.
2. searchParams.delete('utm_source') — удаляет указанный параметр.
3. window.history.replaceState(null, '', url.toString()) — обновляет адрес в адресной строке без перезагрузки страницы.

Что делает каждый шаг

• Объект URL позволяет манипулировать компонентами ссылки — хостом, путём, параметрами.
• Метод delete() удаляет параметр, если он есть.
• replaceState() меняет URL в браузере без перезагрузки и не добавляет запись в историю.

Удаление нескольких параметров

Если нужно удалить сразу несколько:

const url = new URL(window.location.href);['utm_source', 'ref', 'page'].forEach(param => {
    url.searchParams.delete(param);
});window.history.replaceState(null, '', url.toString());

Такой код проходит по списку параметров и удаляет каждый.

Удаление параметра с перезагрузкой

Если требуется перезагрузить страницу после удаления:

const url = new URL(window.location.href);
url.searchParams.delete('utm_source');
window.location.href = url.toString();

В этом случае браузер перейдёт по обновлённой ссылке.

Проверка существования параметра

Можно сначала убедиться, что параметр существует:

const url = new URL(window.location.href);if (url.searchParams.has('utm_source')) {
    url.searchParams.delete('utm_source');
    window.history.replaceState(null, '', url.toString());
}

Метод has() возвращает true, если параметр присутствует.

Частые ошибки и нюансы

Порядок параметров

После удаления параметр исчезает, но порядок остальных остаётся прежним.

Дублирующиеся параметры

Если параметр встречается несколько раз (например, ?tag=js&tag=html), то вызов delete() удаляет все его вхождения.

Совместимость

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

Применение в коде

Такой подход полезен в динамических интерфейсах:

• SPA‑приложения с изменением состояния через URL;
• страницы с фильтрами, которые обновляют параметры;
• аналитику, когда временные метки (ref, utm_*) нужно убрать.

Итог

Удаление GET‑параметра через JavaScript — простая и мощная операция, доступная через современные API:

• URL — для разбора и сборки ссылок;
• searchParams.delete() — для удаления нужного параметра;
• history.replaceState() — для обновления адресной строки без перезагрузки.

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