Hinzufügen eines Parameters zur URL mit JavaScript

276

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

Ursprüngliche URL:

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

Resultierende URL:

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

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

Lessan Vaezi
quelle
Haben Sie nach Javascript-URL-Parsern gesucht ? Sie könnten Ihre eigenen erstellen und jedes & -Zeichen aufteilen, aber es ist wahrscheinlich einfacher, nur vorhandenen Code zu verwenden.
CSL
1
Ich hatte einmal ein ähnliches Szenario und fand diesen Artikel von Peter Bromberg sehr hilfreich:
Cerebrus
2
window.history.pushState ('page2', 'Title', document.location + '/ page2.php'); wird Ihre Arbeit tun, ohne Seite zu laden
Rutunj Sheladiya
1
Diese Frage hat bessere Antworten hier stackoverflow.com/questions/6953944/…
rkb
unglaublich dieses nicht heimisch in dieser armen Sprache , die JS ist ....
bohr

Antworten:

191

Eine grundlegende Implementierung, die Sie anpassen müssen, sieht ungefähr so ​​aus:

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

    // kvp looks like ['key1=value1', 'key2=value2', ...]
    var kvp = document.location.search.substr(1).split('&');
    let i=0;

    for(; i<kvp.length; i++){
        if (kvp[i].startsWith(key + '=')) {
            let pair = kvp[i].split('=');
            pair[1] = value;
            kvp[i] = pair.join('=');
            break;
        }
    }

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

    // can return this or...
    let params = kvp.join('&');

    // reload page with new params
    document.location.search = params;
}

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


die langsame Regex-Methode, mit der ich aus Gründen der Fertigstellung verglichen 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;
}
Annakata
quelle
2
Danke noch einmal. siehe lessanvaezi.com/wp-content/uploads/2009/01/test.html für einen einfachen Vergleich der Methoden
Lessan Vaezi
16
Die Verwendung von Escape () zum Escape von URL-Parametern ist falsch. Es wird für Werte mit "+" unterbrochen. Sie sollten stattdessen encodeURIComponent verwenden. Vollständige Diskussion: xkr.us/articles/javascript/encode-compare
Antonin Hildebrand
4
Ich rufe diese Funktion auf und die Seite wird in einer Endlosschleife neu geladen. Bitte helfen Sie!
Summe
6
Wenn noch keine Parameter in der URL enthalten sind, erhalten Sie einen? & param = Wert
Roy Toledo
9
Solltest du nicht encodeURIComponentlieber verwenden als encodeURI? Ansonsten alle Zeichen wie =, &in Ihrem Namen oder Wert , wird der URI.
Adrian Pronk
271

Sie können eine davon 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);
Vianney Bajart
quelle
2
Ich möchte einen Abfrageparameter ohne Wert hinzufügen, z. B. hinzufügen XML, http://foo.bar/?x=1&y=2damit das Endergebnis ist http://foo.bar/?x=1&y=2&XML. Ist das möglich? Ich habe versucht url.searchParams.set('XML');, url.searchParams.set('XML', null);und url.searchParams.set('XML', undefined);- aber keiner arbeitete in Chrome 63 .
Abdull
2
Vielen Dank! Schade, dass es von iOS noch nicht unterstützt wird. developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
Kanji
27
Schade, dass IE es nicht unterstützt.
Spedy
3
iOS unterstützt jetzt URLSearchParams (seit 9 Tagen nach @
kanjis
8
Gute Nachrichten @MJeffryes! Wird von IE und Netscape immer noch nicht unterstützt.
Vianney Bajart
64

Vielen Dank für Ihren Beitrag. Ich habe Annakata- Code verwendet und geändert, um auch den Fall einzuschließen, in dem 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('&');
        }
    }
Mehdi
quelle
3
Es wäre besser, von escape(key)und escape(value)zu encodeURIComponentfunktionieren.
Kolobok
5
sollte dies tatsächlich überprüfen if (kvp.length==1 && kvp[0]="")?
Charles L.
@ CharlesL. besser istif (document.location.search)
Lyubimov Roman
58

Dies ist eine sehr einfache Lösung. Es steuert nicht die Existenz von Parametern und ändert den vorhandenen Wert nicht. 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;
}
Mehmet Fatih Yıldız
quelle
6
Sie sollten auch "#" in der URL berücksichtigen. Hier ist ein Code-Slop:url = (url.indexOf("?") != -1 ? url.split("?")[0]+"?"+part+"&"+url.split("?")[1] : (url.indexOf("#") != -1 ? url.split("#")[0]+"?"+part+"#"+ url.split("#")[1] : url+'?'+part));
Kanzure
2
@kanzure dieses Ding sieht verdammt böse aus, aber es ist genau das, was ich wollte. Vielen Dank.
Chad von Nau
Warum die URL teilen, um die Existenz eines einzelnen Zeichens zu überprüfen? vergiss auch nicht zu kodieren ... so etwas wiefunction appendQs(url, key, value) { return url + (url.indexOf('?') >= 0 ? "&" : '?') + encodeURIComponent(key) + "=" + encodeURIComponent(value); };
drzaus
1
Repariere es. Diese Funktion prüft nicht, ob der Parameter bereits angegeben ist. Ich habe das getestet und bekommen https://localhost/preview/inventory.html?sortci=priceASC&sortci=priceASC&sortci=stitle.
Jay
@ Jay, warum muss es repariert werden? Überprüfen Sie Ihre Annahmen. Doppelte Abfragezeichenfolgenparameter sind zulässig, genauso wie doppelte Formularfelder. Auf diese Weise werden Kontrollkästchenlisten in HTML implementiert, die per Abfragezeichenfolge übergeben werden, wenn die Formularmethode = get ist.
Stephen
34

Hier ist eine stark vereinfachte Version, die Kompromisse hinsichtlich der Lesbarkeit und weniger Codezeilen anstelle einer mikrooptimierten Leistung eingeht (und wir sprechen realistisch von einem Unterschied von einigen Millisekunden) ), dies wird 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 folgendermaßen verwenden:

document.location.pathname + addUrlParam(document.location.search, 'foo', 'bar');
Garrett
quelle
1
+1 Ich mag, wie Sie etwas anderes als document.location.search angeben können
Muhd
1
+1 Genial, ich stimme zu, dass Lesbarkeit in diesem Fall wichtiger ist als Mikrooptimierung, und ich bin froh, dass jemand diesen Ansatz gewählt hat. @Muhd Vielleicht war das ein Fehler in der JS-Engine, als Sie diesen Kommentar geschrieben haben, aber ich habe gerade '$ 1' in diesem Zusammenhang getestet und es funktioniert gut.
JMTyler
Vielen Dank für die Lösung, aber ich stecke auch fest, wenn ich einen Wert ersetzen möchte und dort bereits ein Parameter vorhanden ist. Stattdessen schreibt ein & es $ 1
Codebryo
2
Garrett: Könnten Sie Ihre Antwort so korrigieren, dass vorhandene Parameter korrekt ersetzt werden? Es ist nur eine Frage des Ersetzens [\?&]durch ([\?&])in RegExp (ich würde es nur selbst bearbeiten, bin mir aber nicht sicher, ob die Community-Richtlinie das Beheben von Fehlern in Antworten erlaubt).
Opyh
Dies funktioniert nicht mit URLs wie " domain.tld ", die "&" anstelle von "?"
user706420
20

/**
* 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);

Beachten Sie außerdem, dass die Parameter codiert werden sollten, bevor sie in die Abfragezeichenfolge eingefügt werden.

http://jsfiddle.net/48z7z4kx/

freedev
quelle
Kleiner Speicherverlust - Sie sollten das Ankerelement entfernen, das dem Dokument hinzugefügt wurde, bevor Sie zurückkehren.
Hanf
@freedev, Nein, ich bin nicht sicher. ;) Es fällt mir schwer, eine maßgebliche Quelle zu finden, aber die Beweise deuten darauf hin, dass Sie richtig sind. Da das erstellte Element niemals an das DOM angehängt wird, sollte es bereinigt werden, sobald die Variable den Gültigkeitsbereich verlässt. Die DOM-API ist in Bezug auf Nebenwirkungen nicht besonders gut konzipiert, daher bin ich übermäßig vorsichtig.
Hanf
Diese Lösung fügt URLs ohne Pfad einen abschließenden Schrägstrich hinzu und ordnet Parameter neu an, die unnötige und möglicherweise unerwünschte Änderungen sind. Es werden auch vorhandene Parameter angehängt, die keinen Wert haben (z http://abc.def/?a&b&b. B. ), anstatt sie zu ersetzen .
Adam Leggett
@AdamLeggett Vielen Dank, dass Sie auf den Fehler hingewiesen haben, der auftritt, wenn ein Anforderungsparameter keinen Wert hat. Ich habe gerade meine Antwort behoben. Die verbleibenden seltsamen Verhaltensweisen, von denen Sie sprechen, werden, wenn Sie Recht haben, vom HTML-Ankerobjekt generiert, das normalerweise eine Standardbrowserkomponente ist. Ich empfehle eine Überprüfung, da es sehr unwahrscheinlich ist, dass ein Browser unnötige oder unerwünschte Verhaltensweisen hinzufügt.
Freedev
1
Der Zweck der Funktion addParam besteht in der Tat darin, einen Parameter mehrmals hinzuzufügen, und vielleicht sollten Sie wissen, dass Sie denselben Parameter auch mit demselben Wert mehrmals übergeben können. stackoverflow.com/questions/24059773/…
freedev
19

Ich habe eine 'Klasse', die dies tut 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, sodass QS :: getQueryString nicht aufgerufen werden muss. Sie können QS :: toString verwenden oder sich, wie in den Beispielen beschrieben, nur darauf verlassen, dass das Objekt in eine Zeichenfolge gezwungen wird.

meouw
quelle
19
const urlParams = new URLSearchParams(window.location.search);

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

window.location.search = urlParams;

.set first agrument ist der Schlüssel, das zweite ist der Wert.

Zoidbergseasharp
quelle
1
Ich liebe die Einfachheit und die Verwendung nativer Browsermethoden
Juan Solano
2
Dies ist die richtige Antwort und sollte mit Top-Stimmen bewertet werden. Diese neue API ist die endgültige für die URL-Verarbeitung
Anthony
8

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

Das heißt das ? wird das Präfix des Parameters sein, aber wenn Sie bereits haben ? in urlstring, als & wird das Präfix sein.

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

Informationen zur Verwendung der encodeURIFunktion finden Sie unter Javascript-URL-Codierung .

Sasa
quelle
7

Dies ist eine einfache Möglichkeit, einen Abfrageparameter hinzuzufügen:

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

Und das ist es mehr hier .

Bitte beachten Sie die Support-Spezifikationen .

T04435
quelle
4
Es scheint, dass dies in keiner Version von Internet Explorer
MAXE
Ideal für Handys. Wenn der Internet Explorer auf meinem Mobilgerät angezeigt wird, werfe ich ihn weg. :-)
stillatmylinux
@ MAXE Sie haben Recht IE / EDGE unterstützen nicht viel. Unterstützt in
T04435
6

Überprüfen Sie https://github.com/derek-watson/jsUri

Manipulation von Uri- und Abfragezeichenfolgen in Javascript.

Dieses Projekt beinhaltet die exzellente 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.

Charlie Liang Yuan
quelle
404 - Die angeforderte URL / p / jsuri / wurde auf diesem Server nicht gefunden. Das ist alles was wir wissen.
Aligma
1
Sieht aus wie es bewegt wurde. Ich habe die URL aktualisiert. Viel Glück!
Charlie Liang Yuan
Bitte geben Sie in Ihrer Antwort die relevanten Details an, nicht nur einen Link.
jhpratt GOFUNDME RELICENSING
6

Irgendwann sehen wir ?am Ende URL, ich habe einige Lösungen gefunden, die Ergebnisse als generieren file.php?&foo=bar. Ich habe meine eigene Lösung gefunden, 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 Korrektur .

Mr.Shan0
quelle
6

Die folgende Funktion hilft Ihnen beim Hinzufügen, Aktualisieren und Löschen von Parametern zur 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

// Beispiel2

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

// Beispiel4

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

// Beispiel5

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); 
  }
Lingeshram
quelle
5

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

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 dies 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();
Lessan Vaezi
quelle
Vielen Dank, dass Sie Ihren Code geteilt haben, Lessan. Ich habe das benutzt und es hat großartig funktioniert! Ich habe einen Kern meiner eigenen Version hochgeladen, der etwas prägnanter bearbeitet wurde und die JSHint-Validierung besteht. gist.github.com/jonathanconway/02a183920506acd9890a
Jonathan
3

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

Wir können das integrierte URL-Modul wie folgt in den Knoten importieren

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/URL https://developer.mozilla.org/en/docs/Web/API/URLSearchParams

Jinxer Albatros
quelle
3

Versuche dies.

// uses the URL class
function setParam(key, value) {
            let url = new URL(window.document.location);
            let params = new URLSearchParams(url.search.slice(1));

            if (params.has(key)) {
                params.set(key, value);
            }else {
                params.append(key, value);
            }
        }
Matěj Husák
quelle
url.searchParamsist die vorinitialisierte Parameterliste für dieses URLObjekt.
Amphetamachine
2

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

In derselben Zeile wie seine Antwort verwende ich diesen Code:

"Es steuert nicht die Existenz von Parametern und ändert den vorhandenen Wert nicht. 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');

  }//*/
Loda
quelle
2

Ich würde mit dieser kleinen, aber vollständigen Bibliothek URLs in js verarbeiten:

https://github.com/Mikhus/jsurl

Joao Leme
quelle
Bitte geben Sie in Ihrer Antwort die relevanten Details an, nicht nur einen Link.
jhpratt GOFUNDME RELICENSING
2

Dies ist, was ich verwende, wenn es um einige grundlegende Ergänzungen oder Aktualisierungen von URL-Parametern 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>

Zauberkünstler
quelle
2

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");
Kuza Grab
quelle
2

Die Antwort von Vianney Bajart ist richtig; Die URL funktioniert jedoch nur, wenn Sie über die vollständige URL mit Port, Host, Pfad und Abfrage verfügen:

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

Und URLSearchParams 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 diese einfach 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 Internet Explorer.

iau
quelle
Wenn Sie verwenden, müssen var u = new URL(window.location), usp = u.searchParams;Sie keine ausgefallene String-Aufteilung verwenden.
Amphetamachine
Während Ihre Lösung für die meisten Dinge funktioniert, wird die URL entstellt, wenn ein Parameterwert ein Fragezeichen enthält:setUrlParams('https://example.com?foo=thing???&bar=baz', 'baz', 'qux') => "https://example.com?foo=thing&baz=qux???&bar=baz"
Amphetamachine
1

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 spielt der Unterschied wirklich keine Rolle!

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;
    }
}
theozero
quelle
Ich bin mir nicht sicher, warum dich jemand herabgestimmt hat. Dies ist eine der zuverlässigeren Lösungen, obwohl es viel mehr Code als nötig ist.
Adam Leggett
1

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?");
}
Adam Leggett
quelle
0

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

Geteiltes Array:

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 die .replace-Funktion nicht eingibt) es immer noch langsamer ist als das Teilen ... Nun. Regexp ist ein bisschen langsam, aber ... äh ...

Paweł Witkowski Fotografie
quelle
Wie ich bereits erwähnte, ist dies tatsächlich vergleichsweise langsam - und fwiw, document.location.search ist klarer
annakata
0

Hier ist was ich tue. Mit meiner Funktion editParams () können Sie beliebige Parameter hinzufügen, entfernen oder ändern und anschließend die URL mithilfe der integrierten Funktion replaceState () aktualisieren:

window.history.replaceState('object or string', 'Title', 'page.html' + editParams('enable', 'true'));


// background functions below:

// add/change/remove URL parameter
// use a value of false to remove parameter
// returns a url-style string
function editParams (key, value) {
  key = encodeURI(key);

  var params = getSearchParameters();

  if (Object.keys(params).length === 0) {
    if (value !== false)
      return '?' + key + '=' + encodeURI(value);
    else
      return '';
  }

  if (value !== false)
    params[key] = encodeURI(value);
  else
    delete params[key];

  if (Object.keys(params).length === 0)
    return '';

  return '?' + $.map(params, function (value, key) {
    return key + '=' + value;
  }).join('&');
}

// Get object/associative array of URL parameters
function getSearchParameters () {
  var prmstr = window.location.search.substr(1);
  return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}

// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
  var params = {},
      prmarr = prmstr.split("&");

  for (var i = 0; i < prmarr.length; i++) {
    var tmparr = prmarr[i].split("=");
    params[tmparr[0]] = tmparr[1];
  }
  return params;
}
Bobb Fwed
quelle
0

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

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

Die folgende Funktion habe ich geschrieben, um zu aktualisieren document.location.search. Es verwendet ein Array von Schlüssel / Wert-Paar-Arrays als Argument und gibt eine überarbeitete Version des letzteren zurück, 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 war:

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;
}
Billynoah
quelle
0

Versuchen Sie
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
Amiron
quelle
0

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

Alles ist gut
quelle
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);
      }
    }
Prasobh.Kollattu
quelle
0

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>

Bashirpour
quelle