Wie kann ich einen Abfragezeichenfolgenparameter in JavaScript löschen?

Gibt es eine bessere Möglichkeit, einen Parameter aus einer Abfragezeichenfolge in einer URL-Zeichenfolge in Standard-JavaScript zu löschen, als einen regulären Ausdruck zu verwenden?

Folgendes habe ich mir bisher ausgedacht, was in meinen Tests zu funktionieren scheint, aber ich mag es nicht, das Querystring-Parsing neu zu erfinden!

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

Scheint gefährlich, weil der Parameter 'bar' übereinstimmen würde:

?a=b&foobar=c

Es würde auch fehlschlagen, wenn parameterZeichen enthalten würden, die in RegExp speziell sind, wie z. B. '.'. Und es ist keine globale Regex, daher würde nur eine Instanz des Parameters entfernt.

Ich würde dafür kein einfaches RegExp verwenden, ich würde die Parameter analysieren und diejenigen verlieren, die Sie nicht wollen.

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

Moderne Browser bieten eine URLSearchParamsSchnittstelle für die Arbeit mit Suchparametern. Welches hat deleteMethode, die param nach Namen entfernt.

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

Von der Bobince-Antwort kopiert, aber Fragezeichen in der Abfragezeichenfolge unterstützt, z

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

Ist es gültig, mehr als ein Fragezeichen in einer URL zu haben?

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

Ich sehe keine größeren Probleme mit einer Regex-Lösung. Vergessen Sie jedoch nicht, die Fragmentkennung (Text nach dem #) beizubehalten.

Hier ist meine Lösung:

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

Und zu Bobince's Punkt, ja - Sie müssten .Zeichen in Parameternamen maskieren .

Sie können die URL ändern mit:

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

Auf diese Weise können Sie die URL ohne den Suchparameter überschreiben. Ich verwende sie, um die URL zu bereinigen, nachdem Sie die GET-Parameter übernommen haben.

Jeder, der an einer Regex-Lösung interessiert ist Ich habe diese Funktion zusammengestellt, um einen Querystring-Parameter hinzuzufügen / zu entfernen / zu aktualisieren. Wenn Sie keinen Wert angeben, wird der Parameter entfernt. Wenn Sie einen Wert angeben, wird der Parameter hinzugefügt / aktualisiert. Wenn keine URL angegeben wird, wird diese aus window.location abgerufen. Diese Lösung berücksichtigt auch den Anker der 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;
    }
}

AKTUALISIEREN

Beim Entfernen des ersten Parameters im Querystring ist ein Fehler aufgetreten. Ich habe den regulären Ausdruck überarbeitet und getestet, um einen Fix einzuschließen.

UPDATE 2

@schellmax Update, um die Situation zu beheben, in der das Hashtag-Symbol verloren geht, wenn eine Querystring-Variable direkt vor einem Hashtag entfernt wird

Angenommen, Sie möchten den Parameter key = val aus dem URI entfernen:

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

Folgendes verwende ich:

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

Ursprüngliche URL: http://www.example.com/test/hello?id=123&foo=bar
Ziel-URL: http://www.example.com/test/hello

Hier ist eine vollständige Funktion zum Hinzufügen und Entfernen von Parametern basierend auf dieser Frage und diesem Github-Kern: 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);
};

Sie können folgende Parameter hinzufügen:

updateQueryStringParam( 'myparam', 'true' );

Und entfernen Sie es so:

updateQueryStringParam( 'myparam', null );

In diesem Thread sagten viele, dass der Regex wahrscheinlich nicht die beste / stabilste Lösung ist ... also bin ich mir nicht 100% sicher, ob dieses Ding einige Mängel hat, aber soweit ich es getestet habe, funktioniert es ziemlich gut.

Dies ist ein sauberer Abfrageparameter zum Entfernen von Versionen mit der URL-Klasse für heutige Browser:

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

URLSearchParams werden in alten Browsern nicht unterstützt

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

IE, Edge (unter 17) und Safari (unter 10.3) unterstützen URLSearchParams innerhalb der URL-Klasse nicht.

Polyfills

URLSearchParams nur Polyfill

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

Vervollständigen Sie Polyfill URL und URLSearchParams, um den letzten WHATWG-Spezifikationen zu entsprechen

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

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

Die obige Version als Funktion

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

Sie sollten eine Bibliothek verwenden, um URI-Manipulationen durchzuführen, da dies komplizierter ist, als es an der Oberfläche scheint, dies selbst zu tun. Schauen Sie sich Folgendes an: http://medialize.github.io/URI.js/

Soweit ich sehen kann, kann keiner der oben genannten Parameter mit normalen Parametern und Array-Parametern umgehen. Hier ist eine, die es tut.

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

Wie man es benutzt:

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

Um einen Parameter zu aktualisieren, entfernen Sie ihn einfach und fügen Sie ihn hinzu. Fühlen Sie sich frei, eine Dummy-Funktion dafür zu machen.

Alle Antworten in diesem Thread haben den Fehler, dass Anker- / Fragmentteile von URLs nicht erhalten bleiben.

Wenn Ihre URL also so aussieht:

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

und Sie ersetzen 'Parameter'

Sie verlieren Ihren Fragmenttext.

Das Folgende ist eine Anpassung früherer Antworten (Bobince via LukePH), die dieses Problem angehen:

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

Hier eine Lösung, die:

1. verwendet URLSearchParams (kein schwer zu verstehender Regex)
2. aktualisiert die URL in der Suchleiste ohne erneutes Laden
3. verwaltet alle anderen Teile der URL (z. B. Hash)
4. Entfernt überflüssige Abfragezeichenfolgen,? wenn der letzte Parameter entfernt wurde

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

Hinweis: Wie in anderen Antworten erwähnt, wird URLSearchParams im IE nicht unterstützt. Verwenden Sie daher eine Polyfüllung .

Wenn es sich um eine Instanz von handelt URL, verwenden Sie die deleteFunktion vonsearchParams

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

Eine andere direkte und einfachere Antwort wäre

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

Eine modifizierte Version der Lösung von ssh_imov

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

Rufen Sie so an

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

Dies gibt die URL ohne ANY GET-Parameter zurück:

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

Ich habe praktisch die folgende Funktion geschrieben, um die URL-Parameter zu verarbeiten und den endgültigen Status als Zeichenfolge zu erhalten und die Seite umzuleiten. Hoffentlich profitiert es.

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

Wenn ich beispielsweise auf eine Schaltfläche klicke, soll der Seitenwert gelöscht und der Kategoriewert hinzugefügt werden.

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

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

});

Ich finde es sehr nützlich!

Ich bin froh, dass du hier gescrollt hast.

Ich würde Ihnen vorschlagen, diese Aufgabe durch die nächsten möglichen Lösungen zu lösen:

1. Sie müssen nur moderne Browser unterstützen (Edge> = 17) - verwenden Sie die URLSearchParams.delete () API . Es ist nativ und offensichtlich der bequemste Weg, um diese Aufgabe zu lösen.
2. Wenn dies keine Option ist, möchten Sie möglicherweise eine Funktion schreiben, um dies zu tun. Eine solche Funktion hat
   • Ändern Sie die URL nicht, wenn kein Parameter vorhanden ist
   • URL-Parameter ohne Wert entfernen, wie http://google.com/?myparm
   • Entfernen Sie den URL-Parameter mit einem Wert wie http://google.com/?myparm=1
   • Entfernen Sie den URL-Parameter, wenn er zweimal in der URL enthalten ist http://google.com?qp=1&qpqp=2&qp=1
   • Verwendet keine forSchleife und ändert das Array während der Schleife nicht
   • ist funktionaler
   • ist besser lesbar als Regexp-Lösungen
   • Stellen Sie vor der Verwendung sicher, dass Ihre URL nicht verschlüsselt ist

Funktioniert in IE> 9 (ES5-Version)

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

Ausgefallene ES6-Version

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

Sehen Sie hier, wie es funktioniert

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())

Wenn Sie sich für jQuery interessieren, gibt es ein gutes Plugin zur Manipulation von Abfragezeichenfolgen:

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

    }
}