web-dev-qa-db-de.com

Wie kann ich einen Abfragezeichenfolge-Parameter 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, anstatt einen regulären Ausdruck zu verwenden?

Hier ist das, was ich bisher gefunden habe, was in meinen Tests zu funktionieren scheint, aber ich möchte das Querystring-Parsing nicht neu 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;
}
javascriptquery-string
105
Matthew Lock
"[&;]?" + parameter + "=[^&;]+"

Scheint gefährlich zu sein, da der Parameter ″ bar ″ mit folgendem übereinstimmt:

?a=b&foobar=c

Es würde auch fehlschlagen, wenn parameter Zeichen enthält, die in RegExp speziell sind, z. B.. Und es ist kein globaler Regex, also würde nur eine Instanz des Parameters entfernt.

Ich würde dafür kein einfaches RegExp verwenden, ich würde die Parameter darin 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;
}
150
bobince

Kopiert von bobince answer, unterstützt jedoch Fragezeichen in der Abfragezeichenfolge, z

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

Ist es zulässig, 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;
}
22
LukePH

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 um es auf den Punkt zu bringen: Ja, Sie müssen .-Zeichen in Parameternamen mit Escapezeichen versehen.

16
Jared

Jedem, der an einer Regex-Lösung interessiert ist, habe ich diese Funktion zum Hinzufügen/Entfernen/Aktualisieren eines Querystring-Parameters zusammengestellt. 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 sie von 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;
    }
}

UPDATE

Beim Entfernen des ersten Parameters in der Querzeichenfolge ist ein Fehler aufgetreten. Ich habe die Regex und den Test überarbeitet, um eine Korrektur hinzuzufügen.

UPDATE 2

@schellmax-Update zur Behebung einer Situation, in der das Hashtag-Symbol verloren geht, wenn eine Querystring-Variable direkt vor einem Hashtag entfernt wird

12
ellemayo

Moderne Browser bieten URLSearchParams Schnittstelle für die Arbeit mit Suchparametern. Welche Methode hat delete , 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`)
}

12
Yury Tarabanko

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

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

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

Sie können Parameter wie folgt hinzufügen:

updateQueryStringParam( 'myparam', 'true' );

Und entferne es so:

updateQueryStringParam( 'myparam', null );

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

4
Johannes Grandy

Sie können die URL mit ändern:

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

auf diese Weise können Sie die URL ohne den Suchparameter überschreiben. Ich verwende sie zum Bereinigen der URL, nachdem die GET-Parameter übernommen wurden.

4
Santi Nunez

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

JQuery verwenden:

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;
}
3
Huy Phạm

Sie sollten eine Bibliothek verwenden, um die URI-Manipulation durchzuführen, da es komplizierter ist, als es auf den ersten Blick erscheint, um es selbst auszuführen. Werfen Sie einen Blick auf: http://medialize.github.io/URI.js/

2
Ryan

Alle Antworten in diesem Thread haben den Nachteil, dass Anker-/Fragmentteile von URLs nicht beibehalten werden.

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 der vorherigen Antworten (Bobince über LukePH), die dieses Problem ansprechen:

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;
}
2
Bret Weinraub

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

1
Basj

Soweit ich sehen kann, kann keiner der oben genannten Parameter normale Parameter und Array-Parameter verarbeiten. Hier ist einer, der das 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 erstellen.

1
Keir Simmons

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

Rufe so an

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

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 );
}
0
David Freimaucher

Dies ist eine saubere Version remove Abfrageparameter 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 wird von alten Browsern nicht unterstützt

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

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

Polyfills

URLSearchParams nur Polyfill

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

Vervollständigen Sie die URL und die URLSearchParams von Polyfill, um die letzten WHATWG-Spezifikationen zu erfüllen

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

0
Heroselohim