В веб-разработке данные обычно передаются через URL-адреса с использованием параметров запроса или реквизитов. Однако существуют сценарии, в которых вам может потребоваться динамически удалять или манипулировать этими реквизитами. В этой статье мы рассмотрим различные методы удаления реквизитов из URL-адреса, а также примеры кода, чтобы помочь вам эффективно выполнить эту задачу.

Метод 1: использование API-интерфейсов URL JavaScript и URLSearchParams

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

Метод 2: использование регулярных выражений (Regex)

const url = window.location.href;
const propName = 'propName';
const regex = new RegExp(`([?&])${propName}=[^&#]+[&]?`);
const newUrl = url.replace(regex, '$1').replace(/[?&]$/, '');
window.history.replaceState(null, '', newUrl);

Метод 3. Использование метода History.replaceState()

const url = window.location.href;
const propName = 'propName';
const regex = new RegExp(`([?&])${propName}=[^&#]+[&]?`);
const newUrl = url.replace(regex, '$1').replace(/[?&]$/, '');
window.history.replaceState(null, '', newUrl);

Метод 4. Использование API URLSearchParams (современные браузеры)

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

Метод 5. Использование библиотеки анализа URL-адресов, например qs.js

const url = window.location.href;
const propName = 'propName';
const parsedUrl = qs.parse(url, { ignoreQueryPrefix: true });
delete parsedUrl[propName];
const newUrl = `${window.location.origin}${window.location.pathname}?${qs.stringify(parsedUrl)}`;
window.history.replaceState(null, '', newUrl);