Wie kann ich einen Abfrage-String-Parameter in JavaScript löschen?

Question

Gibt es eine bessere Art und Weise einen Parameter aus einem Abfrage-String in einer URL-Zeichenfolge in Standard JavaScript anders als durch die Verwendung eines regulären Ausdrucks?

zu löschen

Hier ist, was ich mit so weit habe kommen, die in meinen Tests scheinen zu funktionieren, aber ich weiß nicht neu zu erfinden, wie Abfragezeichen Parsen!

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

Answer 1

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

Es scheint gefährlich, weil es Parameter ‚bar‘ passen würde:

?a=b&foobar=c

Auch wäre es fehl, wenn parameter alle Zeichen enthalten, die in RegExp, wie Sonder sind ‚‘. Und es ist nicht eine globale Regex, so dass es nur eine Instanz des Parameters entfernen würde.

Ich würde nicht ein einfaches RegExp für diese, ich die Parameter analysieren würde in und verlieren die, 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;
}

Answer 2

von bobince Antwort kopiert, aber es Unterstützung Fragezeichen in dem Abfrage-String gemacht, zB

http://www.google.com/search?q = Test ??? + etwas & aq = f

Ist es gültig mehr als ein Fragezeichen in einer URL 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;
}

Answer 3

Moderne Browser bieten URLSearchParams Schnittstelle mit Such params zu arbeiten. Was hat delete Methode, die param mit 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`)
}

Answer 4

Ich sehe keine größeren Probleme mit einer regex Lösung. Aber vergessen Sie nicht die Fragmentbezeichner (Text nach dem #) zu bewahren.

Hier ist meine Lösung:

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

Und Punkt des bobince, ja -. Sie bräuchten . Zeichen in Parameternamen zu entkommen

Answer 5

Wer Interesse an einer regex Lösung, die ich diese Funktion gesetzt habe gemeinsam zum Hinzufügen / Entfernen / a Abfragezeichenfolgeflag Parameter aktualisieren. Nicht liefert einen Wert des Parameters entfernen, liefert ein fügt / aktualisieren, um die Paramter. Wenn keine URL angegeben wird, wird es von window.location ergriffen werden. Diese Lösung nimmt auch die Anker URL zu berücksichtigen.

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

Es wurde ein Fehler, wenn der erste Parameter in der Abfragezeichenfolgeflag entfernen, habe ich die Regex und Test nachgearbeitet ein Update enthalten.

UPDATE 2

@schellmax Update Situation zu beheben, wo Hashtag Symbol verloren geht, wenn eine Abfragezeichenfolgeflag Variable direkt vor einem Hashtag Entfernen

Answer 6

Sie können die URL ändern mit:

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

Auf diese Weise können Sie die URL ohne die Suchparameter überschreiben, ich kann es verwenden, um die URL zu reinigen, nachdem die GET-Parameter übernehmen.

Answer 7

Angenommen, Sie key = val Parameter von URI entfernen möchten:

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

Answer 8

Hier ist, was ich verwende:

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

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

Answer 9

Heres eine vollständige Funktion zum Hinzufügen und Parameter auf der Grundlage diese Frage und diesen Github Kern zu entfernen: 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 hinzu:

updateQueryStringParam( 'myparam', 'true' );

Und entfernen Sie es wie folgt aus:

updateQueryStringParam( 'myparam', null );

In diesem Thread sagten viele, dass der Regex ist wahrscheinlich nicht die beste / stabile Lösung ... so im nicht 100% sicher, ob das, was einige Fehler hat, aber so weit ich es getestet es funktioniert ziemlich gut.

Answer 10

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

Answer 11

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

Answer 12

Sie sollten sein, eine Bibliothek mit URI-Manipulation zu tun, wie es komplizierter ist, als es auf der Oberfläche, es selbst zu tun scheint. Schauen Sie sich auf: http://medialize.github.io/URI.js/

Answer 13

Von dem, was ich sehen kann, keine der oben genannten können normale Parameter und Array-Parameter verarbeiten. Hier ist eine, die funktioniert.

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 verwendet:

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

Natürlich einen Parameter zu aktualisieren, entfernen Sie einfach dann hinzuzufügen. Fühlen Sie sich frei eine Dummy-Funktion für sie zu machen.

Answer 14

alle Antworten auf diesen Thread haben einen Fehler, dass sie nicht beibehalten Anker / Fragment Teile von URLs.

Also, wenn Sie Ihre URL wie folgt aussieht:

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

und Sie ersetzen 'parameter'

werden Sie Ihr Fragment Text verlieren.

Hier finden Sie Anpassung der bisherigen Antworten (bobince über LukePH), das dieses Problem behebt:

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

Answer 15

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

Aufruf wie folgt

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

Answer 16

Dies gibt die URL w / o jede GET-Parameter:

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

Answer 17

Dies ist eine saubere Version entfernen Abfrageparameter mit der URL-Klasse für heute Browser:

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

URLSearchParams nicht auf alten Browsern unterstützt

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

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

Polyfills

URLSearchParams nur polyfill

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

Komplette Polyfill URL und URLSearchParams letzte WHATWG Spezifikationen entsprechen

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

Answer 18

Wenn Sie in jQuery sind, dann gibt es eine gute Query-String-Manipulation Plugin:

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

Answer 19

function removeQueryStringParameter(uri, key, value) 
{

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

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

    if (uri.match(re)) {

        return uri.replace(re, '');

    }
}