wake-up-neo.com

Hinzufügen eines Parameters zur URL mit JavaScript

In einer Webanwendung, die AJAX aufruft, muss ich eine Anfrage senden, aber am Ende der URL einen Parameter hinzufügen, zum Beispiel:

Ursprüngliche URL:

http: //server/myapp.php? id = 1

Resultierende URL:

http: //server/myapp.php? id = 1 & enabled = true

Suchen Sie nach einer JavaScript-Funktion, die die URL nach jedem Parameter analysiert, dann den neuen Parameter hinzufügt oder den Wert aktualisiert, falls bereits einer vorhanden ist.

225
Lessan Vaezi

Eine grundlegende Implementierung, die Sie anpassen müssen, würde ungefähr so ​​aussehen:

function insertParam(key, value)
{
    key = encodeURI(key); value = encodeURI(value);

    var kvp = document.location.search.substr(1).split('&');

    var i=kvp.length; var x; while(i--) 
    {
        x = kvp[i].split('=');

        if (x[0]==key)
        {
            x[1] = value;
            kvp[i] = x.join('=');
            break;
        }
    }

    if(i<0) {kvp[kvp.length] = [key,value].join('=');}

    //this will reload the page, it's likely better to store this until finished
    document.location.search = kvp.join('&'); 
}

Dies ist ungefähr doppelt so schnell wie eine reguläre oder suchbasierte Lösung, hängt jedoch vollständig von der Länge der Abfragezeichenfolge und dem Index einer Übereinstimmung ab


die langsame Regex-Methode, gegen die ich mich aus Gründen der Vollständigkeit orientiert habe (ca. + 150% langsamer)

function insertParam2(key,value)
{
    key = encodeURIComponent(key); value = encodeURIComponent(value);

    var s = document.location.search;
    var kvp = key+"="+value;

    var r = new RegExp("(&|\\?)"+key+"=[^\&]*");

    s = s.replace(r,"$1"+kvp);

    if(!RegExp.$1) {s += (s.length>0 ? '&' : '?') + kvp;};

    //again, do what you will here
    document.location.search = s;
}
178
annakata

Sie können eine der folgenden Optionen verwenden:

Beispiel:

var url = new URL("http://foo.bar/?x=1&y=2");

// If your expected result is "http://foo.bar/?x=1&y=2&x=42"
url.searchParams.append('x', 42);

// If your expected result is "http://foo.bar/?x=42&y=2"
url.searchParams.set('x', 42);
187
Vianney Bajart

Vielen Dank für Ihren Beitrag. Ich habe annakata Code verwendet und geändert, um auch den Fall einzuschließen, dass die URL überhaupt keine Abfragezeichenfolge enthält. Hoffe das würde helfen.

function insertParam(key, value) {
        key = escape(key); value = escape(value);

        var kvp = document.location.search.substr(1).split('&');
        if (kvp == '') {
            document.location.search = '?' + key + '=' + value;
        }
        else {

            var i = kvp.length; var x; while (i--) {
                x = kvp[i].split('=');

                if (x[0] == key) {
                    x[1] = value;
                    kvp[i] = x.join('=');
                    break;
                }
            }

            if (i < 0) { kvp[kvp.length] = [key, value].join('='); }

            //this will reload the page, it's likely better to store this until finished
            document.location.search = kvp.join('&');
        }
    }
62
Mehdi

Dies ist eine sehr einfache Lösung. Es kontrolliert nicht die Existenz von Parametern und ändert auch nicht den vorhandenen Wert. Es fügt Ihren Parameter zum Ende hinzu, sodass Sie den neuesten Wert in Ihrem Back-End-Code erhalten können.

function addParameterToURL(param){
    _url = location.href;
    _url += (_url.split('?')[1] ? '&':'?') + param;
    return _url;
}
55

Hier ist eine stark vereinfachte Version, die Kompromisse für die Lesbarkeit und weniger Codezeilen anstelle der mikrooptimierten Leistung eingeht (und wir sprechen realistisch von ein paar Millisekunden Unterschied ... aufgrund der Art dieses Unterschieds) ), wird dies höchstwahrscheinlich einmal auf einer Seite ausgeführt.

/**
* Add a URL parameter (or changing it if it already exists)
* @param {search} string  this is typically document.location.search
* @param {key}    string  the key to set
* @param {val}    string  value 
*/
var addUrlParam = function(search, key, val){
  var newParam = key + '=' + val,
      params = '?' + newParam;

  // If the "search" string exists, then build params from it
  if (search) {
    // Try to replace an existance instance
    params = search.replace(new RegExp('([?&])' + key + '[^&]*'), '$1' + newParam);

    // If nothing was replaced, then add the new param to the end
    if (params === search) {
      params += '&' + newParam;
    }
  }

  return params;
};

Sie würden dies dann so verwenden:

document.location.pathname + addUrlParam(document.location.search, 'foo', 'bar');
33
Garrett
/**
* Add a URL parameter 
* @param {string} url 
* @param {string} param the key to set
* @param {string} value 
*/
var addParam = function(url, param, value) {
   param = encodeURIComponent(param);
   var a = document.createElement('a');
   param += (value ? "=" + encodeURIComponent(value) : ""); 
   a.href = url;
   a.search += (a.search ? "&" : "") + param;
   return a.href;
}

/**
* Add a URL parameter (or modify if already exists)
* @param {string} url 
* @param {string} param the key to set
* @param {string} value 
*/
var addOrReplaceParam = function(url, param, value) {
   param = encodeURIComponent(param);
   var r = "([&?]|&amp;)" + param + "\\b(?:=(?:[^&#]*))*";
   var a = document.createElement('a');
   var regex = new RegExp(r);
   var str = param + (value ? "=" + encodeURIComponent(value) : ""); 
   a.href = url;
   var q = a.search.replace(regex, "$1"+str);
   if (q === a.search) {
      a.search += (a.search ? "&" : "") + str;
   } else {
      a.search = q;
   }
   return a.href;
}

url = "http://www.example.com#hashme";
newurl = addParam(url, "ciao", "1");
alert(newurl);

Bitte beachten Sie, dass die Parameter vor dem Anhängen in eine Abfragezeichenfolge codiert werden sollten.

http://jsfiddle.net/48z7z4kx/

20
freedev

Ich habe eine "Klasse", die das macht und hier ist es:

function QS(){
    this.qs = {};
    var s = location.search.replace( /^\?|#.*$/g, '' );
    if( s ) {
        var qsParts = s.split('&');
        var i, nv;
        for (i = 0; i < qsParts.length; i++) {
            nv = qsParts[i].split('=');
            this.qs[nv[0]] = nv[1];
        }
    }
}

QS.prototype.add = function( name, value ) {
    if( arguments.length == 1 && arguments[0].constructor == Object ) {
        this.addMany( arguments[0] );
        return;
    }
    this.qs[name] = value;
}

QS.prototype.addMany = function( newValues ) {
    for( nv in newValues ) {
        this.qs[nv] = newValues[nv];
    }
}

QS.prototype.remove = function( name ) {
    if( arguments.length == 1 && arguments[0].constructor == Array ) {
        this.removeMany( arguments[0] );
        return;
    }
    delete this.qs[name];
}

QS.prototype.removeMany = function( deleteNames ) {
    var i;
    for( i = 0; i < deleteNames.length; i++ ) {
        delete this.qs[deleteNames[i]];
    }
}

QS.prototype.getQueryString = function() {
    var nv, q = [];
    for( nv in this.qs ) {
        q[q.length] = nv+'='+this.qs[nv];
    }
    return q.join( '&' );
}

QS.prototype.toString = QS.prototype.getQueryString;

//examples
//instantiation
var qs = new QS;
alert( qs );

//add a sinle name/value
qs.add( 'new', 'true' );
alert( qs );

//add multiple key/values
qs.add( { x: 'X', y: 'Y' } );
alert( qs );

//remove single key
qs.remove( 'new' )
alert( qs );

//remove multiple keys
qs.remove( ['x', 'bogus'] )
alert( qs );

Ich habe die toString-Methode überschrieben, damit QS :: getQueryString nicht aufgerufen werden muss. Sie können QS :: toString verwenden oder sich, wie in den Beispielen beschrieben, darauf verlassen, dass das Objekt in einen String umgewandelt wird.

19
meouw

Wenn Sie eine Zeichenfolge mit einer URL haben, die Sie mit einem Parameter dekorieren möchten, können Sie Folgendes versuchen:

urlstring += ( urlstring.match( /[\?]/g ) ? '&' : '?' ) + 'param=value';

Dies bedeutet, dass ? das Präfix des Parameters ist, aber wenn Sie bereits ? in urlstring, als & wird das Präfix sein.

Ich würde auch empfehlen, encodeURI( paramvariable ) auszuführen, wenn Sie den Parameter nicht fest codiert haben, er sich jedoch in einem paramvariable befindet. oder wenn du lustige Charaktere darin hast.

Informationen zur Verwendung der Funktion encodeURI finden Sie unter JavaScript-URL-Codierung .

7
Sasa

So fügen Sie einfach einen Abfrageparameter hinzu:

const query = new URLSearchParams(window.location.search);
query.append("enabled", "true");

Und das ist es mehr hier .

Bitte beachten Sie die Support-Spezifikationen .

7
T04435

Irgendwann sehen wir ? Am Ende der URL habe ich einige Lösungen gefunden, die Ergebnisse erzeugen als file.php?&foo=bar. ich habe mir eine eigene lösung ausgedacht, die perfekt funktioniert, wie ich will!

location.Origin + location.pathname + location.search + (location.search=='' ? '?' : '&') + 'lang=ar'

Hinweis: location.Origin funktioniert nicht im IE, hier ist die Fehlerbehebung .

6
Mr.Shan0

Check out https://github.com/derek-watson/jsUri

Uri und Query String Manipulation in Javascript.

Dieses Projekt enthält die ausgezeichnete parseUri-Bibliothek für reguläre Ausdrücke von Steven Levithan. Sie können URLs aller Formen und Größen sicher analysieren, unabhängig davon, ob sie ungültig oder abscheulich sind.

4

Die folgende Funktion hilft Ihnen beim Hinzufügen, Aktualisieren und Löschen von Parametern zu oder von der URL.

// beispiel1und

var myURL = '/search';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search

// example2

var myURL = '/search?category=mobile';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?category=mobile&location=california

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?category=mobile&location=new%20york

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search?category=mobile

// beispiel3

var myURL = '/search?location=texas';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search

// example4

var myURL = '/search?category=mobile&location=texas';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?category=mobile&location=california

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?category=mobile&location=new%20york

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search?category=mobile

// example5

var myURL = 'https://example.com/search?location=texas#fragment';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california#fragment

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york#fragment

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search#fragment

Hier ist die Funktion.

function updateUrl(url,key,value){
      if(value!==undefined){
        value = encodeURI(value);
      }
      var hashIndex = url.indexOf("#")|0;
      if (hashIndex === -1) hashIndex = url.length|0;
      var urls = url.substring(0, hashIndex).split('?');
      var baseUrl = urls[0];
      var parameters = '';
      var outPara = {};
      if(urls.length>1){
          parameters = urls[1];
      }
      if(parameters!==''){
        parameters = parameters.split('&');
        for(k in parameters){
          var keyVal = parameters[k];
          keyVal = keyVal.split('=');
          var ekey = keyVal[0];
          var evalue = '';
          if(keyVal.length>1){
              evalue = keyVal[1];
          }
          outPara[ekey] = evalue;
        }
      }

      if(value!==undefined){
        outPara[key] = value;
      }else{
        delete outPara[key];
      }
      parameters = [];
      for(var k in outPara){
        parameters.Push(k + '=' + outPara[k]);
      }

      var finalUrl = baseUrl;

      if(parameters.length>0){
        finalUrl += '?' + parameters.join('&'); 
      }

      return finalUrl + url.substring(hashIndex); 
  }
4
lingeshram

Dies ist, was ich verwende, wenn es um einige grundlegende URL-Parameter-Ergänzungen oder -Updates auf der Serverseite wie Node.js geht.

CoffeScript:

###
    @method addUrlParam Adds parameter to a given url. If the parameter already exists in the url is being replaced.
    @param {string} url
    @param {string} key Parameter's key
    @param {string} value Parameter's value
    @returns {string} new url containing the parameter
###
addUrlParam = (url, key, value) ->
    newParam = key+"="+value
    result = url.replace(new RegExp('(&|\\?)' + key + '=[^\&|#]*'), '$1' + newParam)
    if result is url
        result = if url.indexOf('?') != -1 then url.split('?')[0] + '?' + newParam + '&' + url.split('?')[1]
    else if url.indexOf('#') != -1 then url.split('#')[0] + '?' + newParam + '#' + url.split('#')[1]
    else url + '?' + newParam
    return result

JavaScript:

function addUrlParam(url, key, value) {
    var newParam = key+"="+value;
    var result = url.replace(new RegExp("(&|\\?)"+key+"=[^\&|#]*"), '$1' + newParam);
    if (result === url) { 
        result = (url.indexOf("?") != -1 ? url.split("?")[0]+"?"+newParam+"&"+url.split("?")[1] 
           : (url.indexOf("#") != -1 ? url.split("#")[0]+"?"+newParam+"#"+ url.split("#")[1] 
              : url+'?'+newParam));
    }
    return result;
}

var url = "http://www.example.com?foo=bar&ciao=3&Doom=5#hashme";
result1.innerHTML = addUrlParam(url, "ciao", "1");
<p id="result1"></p>
3
magiccrafter

Dies war mein eigener Versuch, aber ich werde die Antwort von Annakata verwenden, da sie viel sauberer zu sein scheint:

function AddUrlParameter(sourceUrl, parameterName, parameterValue, replaceDuplicates)
{
    if ((sourceUrl == null) || (sourceUrl.length == 0)) sourceUrl = document.location.href;
    var urlParts = sourceUrl.split("?");
    var newQueryString = "";
    if (urlParts.length > 1)
    {
        var parameters = urlParts[1].split("&");
        for (var i=0; (i < parameters.length); i++)
        {
            var parameterParts = parameters[i].split("=");
            if (!(replaceDuplicates && parameterParts[0] == parameterName))
            {
                if (newQueryString == "")
                    newQueryString = "?";
                else
                    newQueryString += "&";
                newQueryString += parameterParts[0] + "=" + parameterParts[1];
            }
        }
    }
    if (newQueryString == "")
        newQueryString = "?";
    else
        newQueryString += "&";
    newQueryString += parameterName + "=" + parameterValue;

    return urlParts[0] + newQueryString;
}

Außerdem habe ich dieses jQuery-Plugin aus einem anderen Beitrag zu stackoverflow gefunden. Wenn Sie mehr Flexibilität benötigen, können Sie Folgendes verwenden: http://plugins.jquery.com/project/query-object

Ich würde denken, der Code wäre (noch nicht getestet):

return $.query.parse(sourceUrl).set(parameterName, parameterValue).toString();
3
Lessan Vaezi

Die einfachste Lösung, funktioniert, wenn Sie bereits ein Tag haben oder nicht, und entfernt es automatisch, damit nicht immer gleiche Tags hinzugefügt werden. Viel Spaß

function changeURL(tag)
{
if(window.location.href.indexOf("?") > -1) {
    if(window.location.href.indexOf("&"+tag) > -1){

        var url = window.location.href.replace("&"+tag,"")+"&"+tag;
    }
    else
    {
        var url = window.location.href+"&"+tag;
    }
}else{
    if(window.location.href.indexOf("?"+tag) > -1){

        var url = window.location.href.replace("?"+tag,"")+"?"+tag;
    }
    else
    {
        var url = window.location.href+"?"+tag;
    }
}
  window.location = url;
}

DANN

changeURL("i=updated");
2
Kuza Grave

Ich mag die Antwort von Mehmet Fatih Yıldız, auch wenn er nicht die ganze Frage beantwortet hat.

In der gleichen Zeile wie seine Antwort verwende ich diesen Code:

"Es kontrolliert nicht die Existenz von Parametern und ändert auch nicht den vorhandenen Wert. Es fügt Ihren Parameter am Ende hinzu."

  /** add a parameter at the end of the URL. Manage '?'/'&', but not the existing parameters.
   *  does escape the value (but not the key)
   */
  function addParameterToURL(_url,_key,_value){
      var param = _key+'='+escape(_value);

      var sep = '&';
      if (_url.indexOf('?') < 0) {
        sep = '?';
      } else {
        var lastChar=_url.slice(-1);
        if (lastChar == '&') sep='';
        if (lastChar == '?') sep='';
      }
      _url += sep + param;

      return _url;
  }

und der Tester:

  /*
  function addParameterToURL_TESTER_sub(_url,key,value){
    //log(_url);
    log(addParameterToURL(_url,key,value));
  }

  function addParameterToURL_TESTER(){
    log('-------------------');
    var _url ='www.google.com';
    addParameterToURL_TESTER_sub(_url,'key','value');
    addParameterToURL_TESTER_sub(_url,'key','Text Value');
    _url ='www.google.com?';
    addParameterToURL_TESTER_sub(_url,'key','value');
    _url ='www.google.com?A=B';
    addParameterToURL_TESTER_sub(_url,'key','value');
    _url ='www.google.com?A=B&';
    addParameterToURL_TESTER_sub(_url,'key','value');
    _url ='www.google.com?A=1&B=2';
    addParameterToURL_TESTER_sub(_url,'key','value');

  }//*/
2
Loda

Ich würde mit this kleiner, aber vollständiger Bibliothek arbeiten, um URLs in js zu verarbeiten:

https://github.com/Mikhus/jsurl

2
Joao Leme
const urlParams = new URLSearchParams(window.location.search);

urlParams.set('order', 'date');

window.location.search = urlParams;

.set erstes agrument ist der schlüssel, das zweite ist der wert.

2

Wenn Sie mit URLs in Links oder anderswo herumspielen, müssen Sie möglicherweise auch den Hash berücksichtigen. Hier ist eine ziemlich einfach zu verstehende Lösung. Wahrscheinlich nicht das SCHNELLSTE , da es einen regulären Ausdruck verwendet ... aber in 99,999% der Fälle ist der Unterschied wirklich egal!

function addQueryParam( url, key, val ){
    var parts = url.match(/([^?#]+)(\?[^#]*)?(\#.*)?/);
    var url = parts[1];
    var qs = parts[2] || '';
    var hash = parts[3] || '';

    if ( !qs ) {
        return url + '?' + key + '=' + encodeURIComponent( val ) + hash;
    } else {
        var qs_parts = qs.substr(1).split("&");
        var i;
        for (i=0;i<qs_parts.length;i++) {
            var qs_pair = qs_parts[i].split("=");
            if ( qs_pair[0] == key ){
                qs_parts[ i ] = key + '=' + encodeURIComponent( val );
                break;
            }
        }
        if ( i == qs_parts.length ){
            qs_parts.Push( key + '=' + encodeURIComponent( val ) );
        }
        return url + '?' + qs_parts.join('&') + hash;
    }
}
1
theozero

Vianney Bajarts Antwort ist richtig; URL funktioniert jedoch nur, wenn Sie die vollständige URL mit Port, Host, Pfad und Abfrage haben:

new URL('http://server/myapp.php?id=10&enabled=true')

Und RLSearchParams funktioniert nur, wenn Sie nur die Abfragezeichenfolge übergeben:

new URLSearchParams('?id=10&enabled=true')

Wenn Sie eine unvollständige oder relative URL haben und sich nicht für die Basis-URL interessieren, können Sie einfach nach ? Aufteilen, um die Abfragezeichenfolge abzurufen und später wie folgt beizutreten:

function setUrlParams(url, key, value) {
  url = url.split('?');
  usp = new URLSearchParams(url[1]);
  usp.set(key, value);
  url[1] = usp.toString();
  return url.join('?');
}

let url = 'myapp.php?id=10';
url = setUrlParams(url, 'enabled', true);  // url = 'myapp.php?id=10&enabled=true'
url = setUrlParams(url, 'id', 11);         // url = 'myapp.php?id=11&enabled=true'

Nicht kompatibel mit dem Internet Explorer.

1
iau

Hinzufügen zu @ Vianneys Antwort https://stackoverflow.com/a/44160941/6609678

Wir können das eingebaute URL-Modul in Node importieren wie folgt

const { URL } = require('url');

Beispiel:

Terminal $ node
> const { URL } = require('url');
undefined
> let url = new URL('', 'http://localhost:1989/v3/orders');
undefined
> url.href
'http://localhost:1989/v3/orders'
> let fetchAll=true, timePeriod = 30, b2b=false;
undefined
> url.href
'http://localhost:1989/v3/orders'
>  url.searchParams.append('fetchAll', fetchAll);
undefined
>  url.searchParams.append('timePeriod', timePeriod);
undefined
>  url.searchParams.append('b2b', b2b);
undefined
> url.href
'http://localhost:1989/v3/orders?fetchAll=true&timePeriod=30&b2b=false'
> url.toString()
'http://localhost:1989/v3/orders?fetchAll=true&timePeriod=30&b2b=false'

Nützliche Links:

https://developer.mozilla.org/en-US/docs/Web/API/URLhttps://developer.mozilla.org/en/docs/Web/API/ URLSearchParams

1

Setzen Sie alle Abfragezeichenfolgen zurück

var params = { params1:"val1", params2:"val2" };
let str = jQuery.param(params);

let uri = window.location.href.toString();
if (uri.indexOf("?") > 0)
   uri = uri.substring(0, uri.indexOf("?"));

console.log(uri+"?"+str);
//window.location.href = uri+"?"+str;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
0

Dies funktioniert in allen modernen Browsern.

function insertParam(key,value) {
      if (history.pushState) {
          var newurl = window.location.protocol + "//" + window.location.Host + window.location.pathname + '?' +key+'='+value;
          window.history.pushState({path:newurl},'',newurl);
      }
    }
0

Die einfachste Lösung, die ich mir vorstellen kann, ist diese Methode, die den geänderten URI zurückgibt. Ich habe das Gefühl, dass die meisten von Ihnen viel zu hart arbeiten.

function setParam(uri, key, val) {
    return uri
        .replace(new RegExp("([?&]"+key+"(?=[=&#]|$)[^#&]*|(?=#|$))"), "&"+key+"="+encodeURIComponent(val))
        .replace(/^([^?&]+)&/, "$1?");
}
0
Adam Leggett

Mit den neuen Errungenschaften in JS können Sie der URL folgende Abfrageparameter hinzufügen:

var protocol = window.location.protocol,
    Host = '//' + window.location.Host,
    path = window.location.pathname,
    query = window.location.search;

var newUrl = protocol + Host + path + query + (query ? '&' : '?') + 'param=1';

window.history.pushState({path:newUrl}, '' , newUrl);

Siehe auch diese Möglichkeit Moziila URLSearchParams.append ()

0
Alliswell

Try
Die regulären Ausdrücke, so langsam, also:

var SetParamUrl = function(_k, _v) {// replace and add new parameters

    let arrParams = window.location.search !== '' ? decodeURIComponent(window.location.search.substr(1)).split('&').map(_v => _v.split('=')) : Array();
    let index = arrParams.findIndex((_v) => _v[0] === _k); 
    index = index !== -1 ? index : arrParams.length;
    _v === null ? arrParams = arrParams.filter((_v, _i) => _i != index) : arrParams[index] = [_k, _v];
    let _search = encodeURIComponent(arrParams.map(_v => _v.join('=')).join('&'));

    let newurl = window.location.protocol + "//" + window.location.Host + window.location.pathname + (arrParams.length > 0 ? '?' +  _search : ''); 

    // window.location = newurl; //reload 

    if (history.pushState) { // without reload  
        window.history.pushState({path:newurl}, null, newurl);
    }

};

var GetParamUrl = function(_k) {// get parameter by key

    let sPageURL = decodeURIComponent(window.location.search.substr(1)),
        sURLVariables = sPageURL.split('&').map(_v => _v.split('='));
    let _result = sURLVariables.find(_v => _v[0] === _k);
    return _result[1];

};

Beispiel:

        // https://some.com/some_path
        GetParamUrl('cat');//undefined
        SetParamUrl('cat', "strData");// https://some.com/some_path?cat=strData
        GetParamUrl('cat');//strData
        SetParamUrl('sotr', "strDataSort");// https://some.com/some_path?cat=strData&sotr=strDataSort
        GetParamUrl('sotr');//strDataSort
        SetParamUrl('cat', "strDataTwo");// https://some.com/some_path?cat=strDataTwo&sotr=strDataSort
        GetParamUrl('cat');//strDataTwo
        //remove param
        SetParamUrl('cat', null);// https://some.com/some_path?sotr=strDataSort
0
amiron

Ich kann am besten sagen, dass keine der obigen Antworten den Fall betrifft, in dem die Abfragezeichenfolge Parameter enthält, die selbst ein Array sind und daher mehr als einmal vorkommen, z.

http://example.com?sizes[]=a&sizes[]=b

Die folgende Funktion habe ich geschrieben, um document.location.search Zu aktualisieren. Es wird ein Array von Schlüssel/Wert-Paaren als Argument verwendet und es wird eine überarbeitete Version des letzteren zurückgegeben, mit der Sie tun können, was Sie möchten. Ich benutze es so:

var newParams = [
    ['test','123'],
    ['best','456'],
    ['sizes[]','XXL']
];
var newUrl = document.location.pathname + insertParams(newParams);
history.replaceState('', '', newUrl);

Wenn die aktuelle URL lautete:

http://example.com/index.php?test=replaceme&sizes[]=XL

Das würde dich kriegen

http://example.com/index.php?test=123&sizes[]=XL&sizes[]=XXL&best=456

Funktion

function insertParams(params) {
    var result;
    var ii = params.length;
    var queryString = document.location.search.substr(1);
    var kvps = queryString ? queryString.split('&') : [];
    var kvp;
    var skipParams = [];
    var i = kvps.length;
    while (i--) {
        kvp = kvps[i].split('=');
        if (kvp[0].slice(-2) != '[]') {
            var ii = params.length;
            while (ii--) {
                if (params[ii][0] == kvp[0]) {
                    kvp[1] = params[ii][1];
                    kvps[i] = kvp.join('=');
                    skipParams.Push(ii);
                }
            }
        }
    }
    var ii = params.length;
    while (ii--) {
        if (skipParams.indexOf(ii) === -1) {
            kvps.Push(params[ii].join('='));
        }
    }
    result = kvps.length ? '?' + kvps.join('&') : '';
    return result;
}
0
billynoah

Ok, hier vergleiche ich zwei Funktionen, eine von mir selbst (regExp) und eine andere von (annakata).

Array teilen:

function insertParam(key, value)
{
    key = escape(key); value = escape(value);

    var kvp = document.location.search.substr(1).split('&');

    var i=kvp.length; var x; while(i--) 
    {
        x = kvp[i].split('=');

        if (x[0]==key)
        {
                x[1] = value;
                kvp[i] = x.join('=');
                break;
        }
    }

    if(i<0) {kvp[kvp.length] = [key,value].join('=');}

    //this will reload the page, it's likely better to store this until finished
    return "&"+kvp.join('&'); 
}

Regexp-Methode:

function addParameter(param, value)
{
    var regexp = new RegExp("(\\?|\\&)" + param + "\\=([^\\&]*)(\\&|$)");
    if (regexp.test(document.location.search)) 
        return (document.location.search.toString().replace(regexp, function(a, b, c, d)
        {
                return (b + param + "=" + value + d);
        }));
    else 
        return document.location.search+ param + "=" + value;
}

Testfall:

time1=(new Date).getTime();
for (var i=0;i<10000;i++)
{
addParameter("test","test");
}
time2=(new Date).getTime();
for (var i=0;i<10000;i++)
{
insertParam("test","test");
}

time3=(new Date).getTime();

console.log((time2-time1)+" "+(time3-time2));

Es scheint, dass selbst mit der einfachsten Lösung (wenn regexp nur test verwendet und nicht die .replace-Funktion eingibt) es immer noch langsamer ist als das Aufteilen ... Nun. Regexp ist ein bisschen langsam, aber ... äh ...