Comment puis-je supprimer un paramètre de chaîne de requête en JavaScript?

"[&;]?" + parameter + "=[^&;]+"

Semble dangereuse car elle le paramètre ‘bar’ correspondent à:

?a=b&foobar=c

Aussi, il ne pourrait pas s' parameter contenait des caractères spéciaux dans les RegExp, tels que ‘.’. Et c'est pas un regex, donc il ne serait que de supprimer une instance de l'paramètre.

Je ne voudrais pas utiliser un simple RegExp pour cela, j'aimerais analyser les paramètres et de perdre ceux que vous ne voulez pas.

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;
}

Les navigateurs modernes fournir URLSearchParams interface de travailler avec la recherche params. Qui a supprimer méthode qui supprime les param par son nom.

JS:

if (typeof URLSearchParams !== 'undefined') {
  const params = new URLSearchParams('param1=1&param2=2&param3=3')
  
  console.log(params.toString())
  
  params.delete('param2')
  
  console.log(params.toString())

} else {
  console.log(`Your browser ${navigator.appVersion} does not support URLSearchParams`)
}

Toute personne intéressée à une regex solution j'ai mis en place cette fonction pour ajouter/supprimer/mettre à jour un paramètre de chaîne de requête. Ne pas fournir une valeur de supprimer le paramètre, en fournissant l'on va ajouter/mettre à jour le paramètre. Si aucune URL est fourni, il sera saisi de la fenêtre.emplacement. Cette solution prend également l'url de l'ancre en considération.

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;
}
}

Mise à JOUR

Il y avait un bug lors de la suppression du premier paramètre dans la chaîne de requête, j'ai retravaillé les regex et test d'inclure un correctif.

Mise à JOUR 2

@schellmax mise à jour pour corriger la situation où hashtag symbole est perdu lors de la suppression d'une variable querystring directement avant un hashtag

Vous pouvez modifier l'URL avec:

window.history.pushState({}, document.title, window.location.pathname);

de cette façon, vous pouvez remplacer l'URL sans le paramètre de recherche, je l'utilise pour nettoyer l'URL après les paramètres GET.

Heres une fonction complète pour l'ajout et la suppression des paramètres basés sur cette question et cette github gist:
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);
};

Vous pouvez ajouter des paramètres comme ceci:

updateQueryStringParam( 'myparam', 'true' );

Et l'enlever comme ceci:

updateQueryStringParam( 'myparam', null );

Dans ce fil de nombreux dit que la regex est probablement pas le meilleur/solution stable ... donc je ne suis pas sûr à 100%, si cette chose a des défauts, mais aussi loin que je l'ai testé il fonctionne très bien.

À l'aide de 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;
}

De ce que je peux voir, aucun de ce qui précède peut gérer les paramètres normaux et les paramètres de tableau. En voici une qui ne.

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;
}
}

Comment l'utiliser:

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

Bien sûr, à mettre à jour un paramètre, il suffit de retirer les ajouter. N'hésitez pas à faire un mannequin de la fonction pour cela.

Une version modifiée de la solution par ssh_imov

function removeParam(uri, keyValue) {
var re = new RegExp("([&\?]"+ keyValue + "*$|" + keyValue + "&|[?&]" + keyValue + "(?=#))", "i"); 
return uri.replace(re, '');
}

Appeler comme ça

removeParam("http://google.com?q=123&q1=234&q2=567", "q1=234");
//returns http://google.com?q=123&q2=567

C'est une version propre supprimer le paramètre de requête avec le URL classe pour aujourd'hui navigateurs:

function removeUrlParameter(url, paramKey)
{
var r = new URL(url);
r.searchParams.delete(paramKey);
return r.href;
}

URLSearchParams pas pris en charge sur les vieux navigateurs

https://caniuse.com/#feat=urlsearchparams

C'est à dire, Bord (en-dessous de 17) et Safari (10.3 ci-dessous) ne prennent pas en charge URLSearchParams à l'intérieur de l'URL de la classe.

Polyfills

URLSearchParams seulement polyfill

https://github.com/WebReflection/url-search-params

Complète Polyfill URL et URLSearchParams pour correspondre à la dernière WHATWG spécifications

https://github.com/lifaon74/url-polyfill

function removeQueryStringParameter(uri, key, value) 
{
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '');
}
}