Wie kann ich einen Abfrage-String-Parameter hinzufügen oder aktualisieren?

Question

Wie kann ich mit Javascript einen Query-String-Parameter zur URL hinzufügen, wenn er nicht vorhanden ist, oder wenn er vorhanden ist, den aktuellen Wert aktualisieren? Ich bin mit Jquery für meine Client-Seite Entwicklung.

Answer 1

Ich habe die folgende Funktion geschrieben, die genau das bewirkt, was ich erreichen möchte:

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  }
  else {
    return uri + separator + key + "=" + value;
  }
}

Answer 2

Aktualisierung (2020): URLSearchParams ist jetzt unterstützt bei allen modernen Browsern.

En URLSearchParams kann hierfür in Kombination mit dem Dienstprogramm window.location.search . Zum Beispiel:

if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search);
    searchParams.set("foo", "bar");
    window.location.search = searchParams.toString();
}

Ahora foo wurde festgelegt auf bar unabhängig davon, ob sie bereits existierte oder nicht.

Allerdings ist die oben genannte Zuordnung zu window.location.search wird eine Seite laden, also wenn das nicht erwünscht ist, verwenden Sie die Geschichte API wie folgt:

if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search)
    searchParams.set("foo", "bar");
    var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
    history.pushState(null, '', newRelativePathQuery);
}

Jetzt brauchen Sie keine eigene Regex oder Logik mehr zu schreiben, um das mögliche Vorhandensein von Abfragezeichenfolgen zu behandeln.

Allerdings, Browserunterstützung ist unzureichend, da es derzeit experimentell ist und nur in neueren Versionen von Chrome, Firefox, Safari, iOS Safari, Android Browser, Android Chrome und Opera verwendet wird. Verwendung mit einer Polyfill wenn Sie sich dafür entscheiden, es zu verwenden.

Answer 3

Ich habe die Lösung erweitert und mit einer anderen kombiniert, die ich gefunden habe, um die Querystring-Parameter auf der Grundlage der Benutzereingaben und unter Berücksichtigung der URL-Anker zu ersetzen/aktualisieren/entfernen.

Wird kein Wert angegeben, wird der Parameter entfernt, wird ein Wert angegeben, wird der Parameter hinzugefügt/aktualisiert. Wird keine URL angegeben, so wird sie von window.location übernommen.

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 gab einen Fehler beim Entfernen des ersten Parameters im Querystring, ich habe die Regex und den Test überarbeitet, um eine Lösung zu finden.

Zweite Aktualisierung

Wie von @JarónBarends vorgeschlagen - Überprüfung der Werte auf undefiniert und null, um das Setzen von 0-Werten zu ermöglichen

Drittes Update

Es gab einen Fehler, bei dem das Entfernen einer Querystring-Variable direkt vor einem Hashtag zum Verlust des Hashtag-Symbols führte, der behoben wurde

Vierte Aktualisierung

Danke @rooby für den Hinweis auf eine Regex-Optimierung im ersten RegExp-Objekt. Setzt die anfängliche Regex auf ([?&]) aufgrund des von @YonatanKarni gefundenen Problems mit (\?|&)

Fünftes Update

Entfernen der Deklaration von hash var in if/else-Anweisungen

Answer 4

Sie können die browserinterne URL-API um dies auf recht einfache Weise zu tun, wobei key y value sind Ihr Parametername bzw. Ihr Parameterwert.

const url = new URL(location.href);
url.searchParams.set(key, value);

history.pushState(null, '', url);

Dadurch bleibt alles an der URL erhalten und es wird nur der eine Abfrageparameter geändert oder hinzugefügt. Sie können auch replaceState anstelle von pushState wenn Sie nicht wollen, dass ein neuer Eintrag im Browserverlauf erstellt wird.

Answer 5

Basierend auf der Antwort von @amateur (und jetzt unter Einbeziehung der Korrektur aus dem Kommentar von @j_walker_dev), aber unter Berücksichtigung des Kommentars zu den Hashtags in der URL, verwende ich Folgendes:

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  } else {
    var hash =  '';
    if( uri.indexOf('#') !== -1 ){
        hash = uri.replace(/.*#/, '#');
        uri = uri.replace(/#.*/, '');
    }
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";    
    return uri + separator + key + "=" + value + hash;
  }
}

Bearbeitet und korrigiert [?|&] in der Regex, die natürlich sein sollte [?&] wie in den Kommentaren hervorgehoben

Bearbeiten: Alternative Version zur Unterstützung entfernen auch URL-Parameter. Ich habe verwendet value === undefined als Hinweis auf die Entfernung. Könnte verwenden value === false oder sogar einen separaten Eingangsparameter, wie gewünscht.

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
  if( value === undefined ) {
    if (uri.match(re)) {
    return uri.replace(re, '$1$2').replace(/[?&]$/, '').replaceAll(/([?&])&+/g, '$1').replace(/[?&]#/, '#');
  } else {
    return uri;
  }
  } else {
    if (uri.match(re)) {
      return uri.replace(re, '$1' + key + "=" + value + '$2');
  } else {
    var hash =  '';
    if( uri.indexOf('#') !== -1 ){
        hash = uri.replace(/.*#/, '#');
        uri = uri.replace(/#.*/, '');
    }
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";    
    return uri + separator + key + "=" + value + hash;
    }
  }
}

Sehen Sie es in Aktion unter https://jsfiddle.net/cdt16wex/