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

Existe-t-il un meilleur moyen de supprimer un paramètre d'une chaîne de requête dans une chaîne d'URL en JavaScript standard autrement qu'en utilisant une expression régulière?

Voici ce que j'ai trouvé jusqu'à présent et qui semble fonctionner dans mes tests, mais je n'aime pas réinventer l'analyse des chaînes de requêtes!

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 + "=[^&;]+"

Cela semble dangereux car le paramètre 'bar' correspondrait:

?a=b&foobar=c

De plus, cela échouerait si parameter contenait des caractères spéciaux dans RegExp, tels que «.». Et ce n'est pas une expression régulière globale, donc cela ne supprimerait qu'une seule instance du paramètre.

Je n'utiliserais pas un simple RegExp pour cela, j'analyserais les paramètres et je perdrais 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 fournissent une URLSearchParamsinterface pour travailler avec les paramètres de recherche. Qui a une deleteméthode qui supprime le paramètre par son nom.

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`)
}

Copié à partir de la réponse bobince, mais l'a fait prendre en charge les points d'interrogation dans la chaîne de requête, par exemple

http://www.google.com/search?q=test???+something&aq=f

Est-il valide d'avoir plus d'un point d'interrogation dans une 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;
}

Je ne vois pas de problèmes majeurs avec une solution regex. Mais n'oubliez pas de conserver l'identifiant du fragment (texte après le #).

Voici ma solution:

function RemoveParameterFromUrl(url, parameter) {
  return url
    .replace(new RegExp('[?&]' + parameter + '=[^&#]*(#.*)?$'), '$1')
    .replace(new RegExp('([?&])' + parameter + '=[^&]*&'), '$1');
}

Et pour revenir au sujet de Bobince, oui - vous auriez besoin d'échapper des .caractères dans les noms de paramètres.

Vous pouvez modifier l'URL avec:

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

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

Toute personne intéressée par une solution regex J'ai mis en place cette fonction pour ajouter / supprimer / mettre à jour un paramètre de chaîne de requête. Ne pas fournir de valeur supprimera le paramètre, en fournir une ajoutera / mettra à jour le paramètre. Si aucune URL n'est fournie, elle sera extraite de window.location. Cette solution prend également en compte l'ancre de l'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;
    }
}

METTRE À JOUR

Il y avait un bogue lors de la suppression du premier paramètre de la chaîne de requête, j'ai retravaillé l'expression régulière et testé pour inclure un correctif.

MISE À JOUR 2

Mise à jour @schellmax pour corriger la situation où le symbole du hashtag est perdu lors de la suppression d'une variable de chaîne de requête directement avant un hashtag

En supposant que vous souhaitiez supprimer le paramètre key = val de l'URI:

function removeParam(uri) {
   return uri.replace(/([&\?]key=val*$|key=val&|[?&]key=val(?=#))/, '');
}

Voici ce que j'utilise:

if (location.href.includes('?')) { 
    history.pushState({}, null, location.href.split('?')[0]); 
}

URL d'origine: http://www.example.com/test/hello?id=123&foo=bar
URL de destination: http://www.example.com/test/hello

Voici une fonction complète pour ajouter et supprimer des paramètres en fonction de cette question et de ce 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 celui-ci:

updateQueryStringParam( 'myparam', 'true' );

Et supprimez-le comme ceci:

updateQueryStringParam( 'myparam', null );

Dans ce fil, beaucoup ont dit que le regex n'est probablement pas la meilleure solution / stable ... donc je ne suis pas sûr à 100% si cette chose a des défauts, mais pour autant que je l'ai testé, cela fonctionne assez bien.

Il s'agit d'un paramètre de requête de suppression de version propre avec la classe URL pour les navigateurs d'aujourd'hui:

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

URLSearchParams non pris en charge sur les anciens navigateurs

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

IE, Edge (inférieur à 17) et Safari (inférieur à 10.3) ne prennent pas en charge URLSearchParams dans la classe URL.

Polyfills

URLSearchParams uniquement polyfill

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

Complétez les URL Polyfill et URLSearchParams pour correspondre aux dernières spécifications WHATWG

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

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

La version ci-dessus en fonction

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

Vous devriez utiliser une bibliothèque pour faire la manipulation d'URI car il est plus compliqué qu'il n'y paraît à première vue de le faire vous-même. Jetez un œil à: http://medialize.github.io/URI.js/

D'après ce que je peux voir, aucun des éléments ci-dessus ne peut gérer les paramètres normaux et les paramètres de tableau. En voici un qui le fait.

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, pour mettre à jour un paramètre, il suffit de supprimer puis d'ajouter. N'hésitez pas à en faire une fonction factice.

Toutes les réponses de ce fil ont un défaut en ce qu'elles ne préservent pas les parties d'ancrage / fragment des URL.

Donc, si votre URL ressemble à:

http://dns-entry/path?parameter=value#fragment-text

et vous remplacez 'paramètre'

vous perdrez votre texte fragmenté.

Ce qui suit est une adaptation des réponses précédentes (bobince via LukePH) qui résout ce problème:

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

Voici une solution qui:

1. utilise URLSearchParams (pas de regex difficile à comprendre)
2. met à jour l'URL dans la barre de recherche sans recharger
3. conserve toutes les autres parties de l'URL (par exemple, le hachage)
4. supprime superflous? dans la chaîne de requête si le dernier paramètre a été supprimé

function removeParam(paramName) {
    let searchParams = new URLSearchParams(window.location.search);
    searchParams.delete(paramName);
    if (history.replaceState) {
        let searchString = searchParams.toString().length > 0 ? '?' + searchParams.toString() : '';
        let newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname +  searchString + window.location.hash;
        history.replaceState(null, '', newUrl);
    }
}

Remarque: comme indiqué dans d'autres réponses, URLSearchParams n'est pas pris en charge dans IE , utilisez donc un polyfill .

S'il s'agit d'une instance de URL, utilisez la deletefonction desearchParams

let url = new URL(location.href);
url.searchParams.delete('page');

une autre réponse directe et plus simple serait

let url = new URLSearchParams(location.search)
let key = 'some_key'

return url.has(key)
    ? location.href.replace(new RegExp(`[?&]${key}=${url.get(key)}`), '')
    : location.href

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, '');
    }

Appelez comme ça

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

Cela renvoie l'URL sans aucun paramètre 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 );
}

J'ai pratiquement écrit la fonction suivante pour traiter les paramètres d'url et obtenir le statut final sous forme de chaîne et rediriger la page. Espérons que cela en profite.

function addRemoveUrlQuery(addParam = {}, removeParam = [], startQueryChar = '?'){

    let urlParams = new URLSearchParams(window.location.search);

    //Add param
    for(let i in addParam){
        if(urlParams.has(i)){ urlParams.set(i, addParam[i]); }
        else                { urlParams.append(i, addParam[i]); }
    }

    //Remove param
    for(let i of removeParam){
        if(urlParams.has(i)){
            urlParams.delete(i);
        }
    }

    if(urlParams.toString()){
        return startQueryChar + urlParams.toString();
    }

    return '';
}

Par exemple, lorsque je clique sur un bouton, je veux que la valeur de la page soit supprimée et que la valeur de la catégorie soit ajoutée.

let button = document.getElementById('changeCategory');
button.addEventListener('click', function (e) {

    window.location = addRemoveUrlQuery({'category':'cars'}, ['page']);

});

Je pense que c'était très utile!

Heureux que vous ayez fait défiler ici.

Je vous suggère de résoudre cette tâche par les prochaines solutions possibles:

1. Vous devez prendre en charge uniquement les navigateurs modernes (Edge> = 17) - utilisez l' API URLSearchParams.delete () . Il est natif et constitue évidemment le moyen le plus pratique de résoudre cette tâche.
2. Si ce n'est pas une option, vous souhaiterez peut-être écrire une fonction pour ce faire. Une telle fonction fait
   • ne changez pas l'URL si un paramètre n'est pas présent
   • supprimer le paramètre d'URL sans valeur, comme http://google.com/?myparm
   • supprimer le paramètre d'URL avec une valeur, comme http://google.com/?myparm=1
   • supprimer le paramètre d'URL s'il est dans l'URL deux fois, comme http://google.com?qp=1&qpqp=2&qp=1
   • N'utilise pas de forboucle et ne modifie pas le tableau pendant le bouclage dessus
   • est plus fonctionnel
   • est plus lisible que les solutions d'expression régulière
   • Avant d'utiliser, assurez-vous que votre URL n'est pas encodée

Fonctionne dans IE> 9 (version ES5)

function removeParamFromUrl(url, param) {  // url: string, param: string
  var urlParts = url.split('?'),
      preservedQueryParams = '';

  if (urlParts.length === 2) {
    preservedQueryParams = urlParts[1]
      .split('&')
      .filter(function(queryParam) {
        return !(queryParam === param || queryParam.indexOf(param + '=') === 0)
      })
      .join('&');
  }

  return urlParts[0] +  (preservedQueryParams && '?' + preservedQueryParams); 
}

Version fantaisie ES6

function removeParamFromUrlEs6(url, param) {
  const [path, queryParams] = url.split('?');
	let preservedQueryParams = '';

  if (queryParams) {
    preservedQueryParams = queryParams
      .split('&')
      .filter(queryParam => !(queryParam === param || queryParam.startsWith(`${param}=`)))
      .join('&');
  }

  return `${path}${preservedQueryParams && `?${preservedQueryParams}`}`;  
}

Découvrez comment cela fonctionne ici

function removeParamInAddressBar(parameter) {
    var url = document.location.href;
    var urlparts = url.split('?');

    if (urlparts.length >= 2) {
        var urlBase = urlparts.shift();
        var queryString = urlparts.join("?");

        var prefix = encodeURIComponent(parameter) + '=';
        var pars = queryString.split(/[&;]/g);
        for (var i = pars.length; i-- > 0;) {
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {
                pars.splice(i, 1);
            }
        }

        if (pars.length == 0) {
            url = urlBase;
        } else {
            url = urlBase + '?' + pars.join('&');
        }

        window.history.pushState('', document.title, url); // push the new url in address bar
    }
    return url;
}

const params = new URLSearchParams(location.search)
params.delete('key_to_delete')
console.log(params.toString())

Si vous aimez jQuery, il existe un bon plugin de manipulation de chaînes de requête:

• http://plugins.jquery.com/project/query-object

function removeQueryStringParameter(uri, key, value) 
{

var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");

    var separator = uri.indexOf('?') !== -1 ? "&" : "?";

    if (uri.match(re)) {

        return uri.replace(re, '');

    }
}