Как я могу удалить параметр строки запроса в JavaScript?
-
06-07-2019 - |
Вопрос
Есть ли лучший способ удалить параметр из строки запроса в строке URL в стандартном JavaScript, кроме как с помощью регулярного выражения?
Вот что я придумал на данный момент, и это, кажется, работает в моих тестах, но мне не нравится изобретать синтаксический анализ строк запросов!
function RemoveParameterFromUrl( url, parameter ) {
if( typeof parameter == "undefined" || parameter == null || parameter == "" ) throw new Error( "parameter is required" );
url = url.replace( new RegExp( "\\b" + parameter + "=[^&;]+[&;]?", "gi" ), "" ); "$1" );
// remove any leftover crud
url = url.replace( /[&;]$/, "" );
return url;
}
Решение
"[&;]?" + parameter + "=[^&;]+"
Кажется опасным, потому что это параметр & # 8216; bar & # 8217; будет соответствовать:
?a=b&foobar=c
Кроме того, произойдет сбой, если параметр
содержит какие-либо специальные символы в RegExp, например & # 8216;. & # 8217 ;. И это не глобальное регулярное выражение, поэтому он удалит только один экземпляр параметра.
Я бы не использовал для этого простой RegExp, я бы проанализировал параметры и потерял те, которые вам не нужны.
function removeURLParameter(url, parameter) {
//prefer to use l.search if you have a location/link object
var urlparts = url.split('?');
if (urlparts.length >= 2) {
var prefix = encodeURIComponent(parameter) + '=';
var pars = urlparts[1].split(/[&;]/g);
//reverse iteration as may be destructive
for (var i = pars.length; i-- > 0;) {
//idiom for string.startsWith
if (pars[i].lastIndexOf(prefix, 0) !== -1) {
pars.splice(i, 1);
}
}
return urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : '');
}
return url;
}
Другие советы
Скопировано из ответа bobince, но оно поддерживает вопросительные знаки в строке запроса, например
http://www.google.com/search?q = тест ??? + что-то & амп; водн = F р>
Действительно ли это иметь более одного знака вопроса в URL-адресе?
function removeUrlParameter(url, parameter) {
var urlParts = url.split('?');
if (urlParts.length >= 2) {
// Get first part, and remove from array
var urlBase = urlParts.shift();
// Join it back up
var queryString = urlParts.join('?');
var prefix = encodeURIComponent(parameter) + '=';
var parts = queryString.split(/[&;]/g);
// Reverse iteration as may be destructive
for (var i = parts.length; i-- > 0; ) {
// Idiom for string.startsWith
if (parts[i].lastIndexOf(prefix, 0) !== -1) {
parts.splice(i, 1);
}
}
url = urlBase + '?' + parts.join('&');
}
return url;
}
Современные браузеры обеспечить URLSearchParams
интерфейс для работы с параметрами поиска.Который имеет delete
метод, который удаляет параметр по имени.
if (typeof URLSearchParams !== 'undefined') {
const params = new URLSearchParams('param1=1¶m2=2¶m3=3')
console.log(params.toString())
params.delete('param2')
console.log(params.toString())
} else {
console.log(`Your browser ${navigator.appVersion} does not support URLSearchParams`)
}
Я не вижу серьезных проблем с решением регулярных выражений. Но не забудьте сохранить идентификатор фрагмента (текст после #
). Р>
Вот мое решение:
function RemoveParameterFromUrl(url, parameter) {
return url
.replace(new RegExp('[?&]' + parameter + '=[^&#]*(#.*)?
И, с точки зрения Бобинса, да - вам нужно экранировать символы .
в именах параметров.
), '$1')
.replace(new RegExp('([?&])' + parameter + '=[^&]*&'), '$1');
}
И, с точки зрения Бобинса, да - вам нужно экранировать символы .
в именах параметров.
Всем, кого интересует решение с регулярными выражениями, я собрал эту функцию для добавления / удаления / обновления параметра querystring.Непредоставление значения приведет к удалению параметра, его предоставление добавит / обновит параметр.Если URL-адрес не указан, он будет извлечен из window.Расположение.Это решение также учитывает привязку URL-адреса.
function UpdateQueryString(key, value, url) {
if (!url) url = window.location.href;
var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
hash;
if (re.test(url)) {
if (typeof value !== 'undefined' && value !== null)
return url.replace(re, '$1' + key + "=" + value + '$2$3');
else {
hash = url.split('#');
url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
url += '#' + hash[1];
return url;
}
}
else {
if (typeof value !== 'undefined' && value !== null) {
var separator = url.indexOf('?') !== -1 ? '&' : '?';
hash = url.split('#');
url = hash[0] + separator + key + '=' + value;
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
url += '#' + hash[1];
return url;
}
else
return url;
}
}
Обновить
Была ошибка при удалении первого параметра в строке запроса, я переработал регулярное выражение и тест, чтобы включить исправление.
ОБНОВЛЕНИЕ 2
Обновление @schellmax для исправления ситуации, когда символ хэштега терялся при удалении переменной querystring непосредственно перед хэштегом
Вы можете изменить URL с помощью:
window.history.pushState({}, document.title, window.location.pathname);
таким образом, вы можете перезаписать URL без параметра поиска, я использую его для очистки URL после получения параметров GET.
Если вы хотите удалить параметр key = val из URI:
function removeParam(uri) {
return uri.replace(/([&\?]key=val*$|key=val&|[?&]key=val(?=#))/, '');
}
Вот что я использую:
if (location.href.includes('?')) {
history.pushState({}, null, location.href.split('?')[0]);
}
Оригинальный URL: http://www.example.com/test/hello ? ID = 123 & амп; Foo = бар
Целевой URL: http://www.example.com/test/hello
Вот полная функция для добавления и удаления параметров, основанная на этом вопросе и этой сути github: https://gist.github.com/excalq/2961415
var updateQueryStringParam = function (key, value) {
var baseUrl = [location.protocol, '//', location.host, location.pathname].join(''),
urlQueryString = document.location.search,
newParam = key + '=' + value,
params = '?' + newParam;
// If the "search" string exists, then build params from it
if (urlQueryString) {
updateRegex = new RegExp('([\?&])' + key + '[^&]*');
removeRegex = new RegExp('([\?&])' + key + '=[^&;]+[&;]?');
if( typeof value == 'undefined' || value == null || value == '' ) { // Remove param if value is empty
params = urlQueryString.replace(removeRegex, "$1");
params = params.replace( /[&;]$/, "" );
} else if (urlQueryString.match(updateRegex) !== null) { // If param exists already, update it
params = urlQueryString.replace(updateRegex, "$1" + newParam);
} else { // Otherwise, add it to end of query string
params = urlQueryString + '&' + newParam;
}
}
window.history.replaceState({}, "", baseUrl + params);
};
Вы можете добавить такие параметры:
updateQueryStringParam( 'myparam', 'true' );
И удалите это так:
updateQueryStringParam( 'myparam', null );
В этой теме многие говорили, что регулярное выражение, вероятно, не самое лучшее / стабильное решение ... поэтому я не уверен на 100%, если у этой вещи есть некоторые недостатки, но, насколько я ее протестировал, она работает довольно хорошо.
Вышеуказанная версия как функция
function removeURLParam(url, param)
{
var urlparts= url.split('?');
if (urlparts.length>=2)
{
var prefix= encodeURIComponent(param)+'=';
var pars= urlparts[1].split(/[&;]/g);
for (var i=pars.length; i-- > 0;)
if (pars[i].indexOf(prefix, 0)==0)
pars.splice(i, 1);
if (pars.length > 0)
return urlparts[0]+'?'+pars.join('&');
else
return urlparts[0];
}
else
return url;
}
Использование jQuery:
function removeParam(key) {
var url = document.location.href;
var params = url.split('?');
if (params.length == 1) return;
url = params[0] + '?';
params = params[1];
params = params.split('&');
$.each(params, function (index, value) {
var v = value.split('=');
if (v[0] != key) url += value + '&';
});
url = url.replace(/&$/, '');
url = url.replace(/\?$/, '');
document.location.href = url;
}
Вы должны использовать библиотеку для манипулирования URI, поскольку это сложнее, чем кажется на первый взгляд, сделать это самостоятельно. Взгляните на: http://medialize.github.io/URI.js/ р>
Из того, что я вижу, ничего из вышеперечисленного не может обрабатывать обычные параметры и параметры массива. Вот тот, который делает.
function removeURLParameter(param, url) {
url = decodeURI(url).split("?");
path = url.length == 1 ? "" : url[1];
path = path.replace(new RegExp("&?"+param+"\\[\\d*\\]=[\\w]+", "g"), "");
path = path.replace(new RegExp("&?"+param+"=[\\w]+", "g"), "");
path = path.replace(/^&/, "");
return url[0] + (path.length
? "?" + path
: "");
}
function addURLParameter(param, val, url) {
if(typeof val === "object") {
// recursively add in array structure
if(val.length) {
return addURLParameter(
param + "[]",
val.splice(-1, 1)[0],
addURLParameter(param, val, url)
)
} else {
return url;
}
} else {
url = decodeURI(url).split("?");
path = url.length == 1 ? "" : url[1];
path += path.length
? "&"
: "";
path += decodeURI(param + "=" + val);
return url[0] + "?" + path;
}
}
Как его использовать:
url = location.href;
-> http://example.com/?tags[]=single&tags[]=promo&sold=1
url = removeURLParameter("sold", url)
-> http://example.com/?tags[]=single&tags[]=promo
url = removeURLParameter("tags", url)
-> http://example.com/
url = addURLParameter("tags", ["single", "promo"], url)
-> http://example.com/?tags[]=single&tags[]=promo
url = addURLParameter("sold", 1, url)
-> http://example.com/?tags[]=single&tags[]=promo&sold=1
Конечно, чтобы обновить параметр, просто удалите и добавьте. Не стесняйтесь сделать для него фиктивную функцию.
У всех ответов в этой теме есть недостаток, заключающийся в том, что они не сохраняют части ссылок на якорь / фрагменты.
Итак, если ваш URL выглядит следующим образом:
http://dns-entry/path?parameter=value#fragment-text
и вы замените «параметр»
вы потеряете свой фрагмент текста.
Ниже приводится адаптация предыдущих ответов (bobince через LukePH), которая решает эту проблему:
function removeParameter(url, parameter)
{
var fragment = url.split('#');
var urlparts= fragment[0].split('?');
if (urlparts.length>=2)
{
var urlBase=urlparts.shift(); //get first part, and remove from array
var queryString=urlparts.join("?"); //join it back up
var prefix = encodeURIComponent(parameter)+'=';
var pars = queryString.split(/[&;]/g);
for (var i= pars.length; i-->0;) { //reverse iteration as may be destructive
if (pars[i].lastIndexOf(prefix, 0)!==-1) { //idiom for string.startsWith
pars.splice(i, 1);
}
}
url = urlBase + (pars.length > 0 ? '?' + pars.join('&') : '');
if (fragment[1]) {
url += "#" + fragment[1];
}
}
return url;
}
Модифицированная версия решения от ssh_imov
function removeParam(uri, keyValue) {
var re = new RegExp("([&\?]"+ keyValue + "*$|" + keyValue + "&|[?&]" + keyValue + "(?=#))", "i");
return uri.replace(re, '');
}
Звоните вот так
removeParam("http://google.com?q=123&q1=234&q2=567", "q1=234");
// returns http://google.com?q=123&q2=567
Возвращает URL без каких-либо параметров GET:
var href = document.location.href;
var search = document.location.search;
var pos = href.indexOf( search );
if ( pos !== -1 ){
href = href.slice( 0, pos );
console.log( href );
}
Это чистая версия удалить параметр запроса с помощью Класс URL-адреса на сегодняшний день браузеры:
function removeUrlParameter(url, paramKey)
{
var r = new URL(url);
r.searchParams.delete(paramKey);
return r.href;
}
URLSearchParams не поддерживается в старых браузерах
https://caniuse.com/#feat=urlsearchparams
IE, Edge (ниже 17) и Safari (ниже 10.3) не поддерживают URLSearchParams внутри класса URL.
Полифиллы
URLSearchParams заполняет только поля
https://github.com/WebReflection/url-search-params
Заполните URL-адрес Polyfill и URLSearchParams в соответствии с последними спецификациями WHATWG
Если вы увлекаетесь jQuery, есть хороший плагин для обработки строк запросов:
function removeQueryStringParameter(uri, key, value)
{
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '');
}
}