Ändern Sie die URL-Parameter


189

Ich habe diese URL:

site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc

Was ich brauche, ist in der Lage zu sein, den URL-Parameterwert 'Zeilen' in etwas zu ändern, das ich spezifiziere, sagen wir 10. Und wenn die 'Zeilen' nicht existieren, muss ich sie am Ende der URL hinzufügen und die hinzufügen Wert, den ich bereits angegeben habe (10).


2
Eine leichte Antwort ohne Plugin: stackoverflow.com/a/10997390/11236
ripper234

11
Ich kann nicht glauben, dass es 2013 ist und es gibt keinen besseren Weg, dies zu tun, wie etwas, das in die Kernbrowser-Bibliotheken eingebaut ist.
Tyler Collier

Siehe meine Antwort für eine moderne Lösung: stackoverflow.com/a/19965480/64949
Sindre Sorhus

6
@ TylerCollier Mitte 2015 jetzt und immer noch nichts :(
Tejas Manohar

3
Scheint, als ob wir dort
ankommen

Antworten:


111

Ich habe Sujoys Code erweitert, um eine Funktion zu bilden.

/**
 * http://stackoverflow.com/a/10997390/11236
 */
function updateURLParameter(url, param, paramVal){
    var newAdditionalURL = "";
    var tempArray = url.split("?");
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = "";
    if (additionalURL) {
        tempArray = additionalURL.split("&");
        for (var i=0; i<tempArray.length; i++){
            if(tempArray[i].split('=')[0] != param){
                newAdditionalURL += temp + tempArray[i];
                temp = "&";
            }
        }
    }

    var rows_txt = temp + "" + param + "=" + paramVal;
    return baseURL + "?" + newAdditionalURL + rows_txt;
}

Funktionsaufrufe:

var newURL = updateURLParameter(window.location.href, 'locId', 'newLoc');
newURL = updateURLParameter(newURL, 'resId', 'newResId');

window.history.replaceState('', '', updateURLParameter(window.location.href, "param", "value"));

Aktualisierte Version, die sich auch um die Anker in der URL kümmert.

function updateURLParameter(url, param, paramVal)
{
    var TheAnchor = null;
    var newAdditionalURL = "";
    var tempArray = url.split("?");
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = "";

    if (additionalURL) 
    {
        var tmpAnchor = additionalURL.split("#");
        var TheParams = tmpAnchor[0];
            TheAnchor = tmpAnchor[1];
        if(TheAnchor)
            additionalURL = TheParams;

        tempArray = additionalURL.split("&");

        for (var i=0; i<tempArray.length; i++)
        {
            if(tempArray[i].split('=')[0] != param)
            {
                newAdditionalURL += temp + tempArray[i];
                temp = "&";
            }
        }        
    }
    else
    {
        var tmpAnchor = baseURL.split("#");
        var TheParams = tmpAnchor[0];
            TheAnchor  = tmpAnchor[1];

        if(TheParams)
            baseURL = TheParams;
    }

    if(TheAnchor)
        paramVal += "#" + TheAnchor;

    var rows_txt = temp + "" + param + "=" + paramVal;
    return baseURL + "?" + newAdditionalURL + rows_txt;
}

Ich kann das scheinbar nicht zum Laufen bringen. Hier ist mein Code: jsfiddle.net/Draven/tTPYL/1 Die URL würde so aussehen http://www.domain.com/index.php?action=my_action&view-all=Yesund ich muss den Wert "Alle anzeigen" ändern. Meine SO-Frage, die geschlossen wurde: stackoverflow.com/questions/13025880/…
Draven

Bist du sicher? es hat bei mir leicht funktioniert. Überprüfen Sie es hier: jsfiddle.net/mw49a
Adil Malik

1
Verwenden Sie "var i = 0" anstelle von "i = 0", um zu verhindern, dass i als globale Variable erstellt / geändert wird.
Jonathan Aquino

1
Einige andere Probleme mit dieser Funktion: (1) paramVal ist nicht uri-codiert. (2) Wenn paramVal null ist, erhalten Sie foo = null. Es sollte foo = sein (oder noch besser, foo vollständig entfernen).
Jonathan Aquino

Das hat mein Leben so viel einfacher gemacht. Vielen Dank Kumpel!
Boydenhartog

97

Ich denke du willst das Abfrage-Plugin .

Z.B:

window.location.search = jQuery.query.set("rows", 10);

Dies funktioniert unabhängig vom aktuellen Status der Zeilen.


Mofle, das liegt daran, dass das Abfrage-Plugin decodeURIComponent verwendet und decodeURIComponent ("% F8") ungültig ist.
Matthew Flaschen

2
Holen Sie sich das seltsame Zeug aus Ihrer URL. Oder mit anderen Worten: "Ändern Sie Ihre Abfragezeichenfolge so, dass nur gültige UTF-8-Zeichen verwendet werden". :) F8 allein ist kein gültiges UTF-8-Zeichen.
Matthew Flaschen

Gibt es eine Möglichkeit, die Basis-URL von diesem Plugin abzurufen? Wenn meine URL beispielsweise " youtube.com/watch?v=PZootaxRh3M " lautet, rufen Sie " youtube.com/watch "
Matt Norris

3
@Wraith, dafür brauchst du kein Plugin. Es ist nur so window.location.pathname.
Matthew Flaschen

2
@MattNorris Sie benötigen kein Plugin dafür, aber die richtige Antwort lautet: window.location.host + window.location.pathname In Ihrem Fall ist es "www.youtube.com/watch"
nktssh

68

Um meine eigene Frage 4 Jahre später zu beantworten, nachdem ich viel gelernt habe. Insbesondere, dass Sie jQuery nicht für alles verwenden sollten. Ich habe ein einfaches Modul erstellt, das eine Abfragezeichenfolge analysieren / stringifizieren kann. Dies erleichtert das Ändern der Abfragezeichenfolge.

Sie können die Abfragezeichenfolge wie folgt verwenden:

// parse the query string into an object
var q = queryString.parse(location.search);
// set the `row` property
q.rows = 10;
// convert the object to a query string
// and overwrite the existing query string
location.search = queryString.stringify(q);

1
Wow, das ist eine genial einfache Lösung. Danke dir!
Jetlej

Das funktioniert wie ein Champion! Vielen Dank, Sindre 🏆🏆🏆 (alles, was Sie tun müssen, ist "query-string / index.js" zu minimieren und es unten in Ihr js einzufügen)
Ronnie Royston

1
Eine zusätzliche Bibliothek nur dafür zu haben, scheint ein bisschen extra zu sein ...
The Godfather

63

Schnelle kleine Lösung in reinem js, keine Plugins erforderlich:

function replaceQueryParam(param, newval, search) {
    var regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
    var query = search.replace(regex, "$1").replace(/&$/, '');

    return (query.length > 2 ? query + "&" : "?") + (newval ? param + "=" + newval : '');
}

Nennen Sie es so:

 window.location = '/mypage' + replaceQueryParam('rows', 55, window.location.search)

Oder wenn Sie auf derselben Seite bleiben und mehrere Parameter ersetzen möchten:

 var str = window.location.search
 str = replaceQueryParam('rows', 55, str)
 str = replaceQueryParam('cols', 'no', str)
 window.location = window.location.pathname + str

bearbeiten, danke Luke: Um den Parameter vollständig zu entfernen, übergeben Sie falseoder nullfür den Wert : replaceQueryParam('rows', false, params). Da 0 ist auch falsch , angeben '0'.


2
Um auch einen verwendeten Parameter aus der Ausgabe zu entfernen, gehen Sie folgendermaßen vor: str = replaceQueryParam ('oldparam', false, str) - im Grunde genommen einen falschen Typwert eingeben
Luke Wenke

1
hat ein Problem, dupliziere meinen Parameter ohne guten Grund, schau
dir

@Bludream, dass Code seit Jahren in der Produktion funktioniert. Ich habe noch keinen Parameter dupliziert. Können Sie einen Repro oder eine konstruktivere Information posten?
Bronson

@Bludream Ich verstehe jetzt, es ist das Skript, mit dem Sie verknüpft haben, das doppelte Parameter hinzugefügt hat. :)
Bronson

1
@dVyper richtig, ein falscher Wert entfernt den Parameter vollständig. Verwenden Sie den Text '0' anstelle der Ganzzahl 0.
Bronson

62

Ben Alman hat eine gute jquery Abfragezeichenfolgeflag / url Plugin hier , dass können Sie die Abfragezeichenfolgeflag leicht manipulieren.

Wie gewünscht -

Gehe in die Test - Seite hier

Geben Sie im Firebug Folgendes in die Konsole ein

jQuery.param.querystring(window.location.href, 'a=3&newValue=100');

Sie erhalten die folgende geänderte URL-Zeichenfolge zurück

http://benalman.com/code/test/js-jquery-url-querystring.html?a=3&b=Y&c=Z&newValue=100#n=1&o=2&p=3

Beachten Sie, dass sich der a-Querystring-Wert für a von X auf 3 geändert hat und der neue Wert hinzugefügt wurde.

Sie können dann die neue URL-Zeichenfolge verwenden, wie Sie möchten, z. B. document.location = newUrl oder einen Ankerlink usw. Ändern


4
Ist es nicht jQuery.param.querystring anstelle von jQuery.queryString?
Petr Peller

12
TypeError: jQuery.param.querystring is not a function
TMS

1
Um 'TypeError' zu vermeiden, sollte es sein: jQuery.queryString (window.location.href, 'a = 3 & newValue = 100')
code-gijoe

2
du solltest anrufen jQuery.param.querystring. Ich denke, sie haben die Bibliothek umgestaltet.
Will Wu

Keine dieser Funktionen existiert mehr. Sie möchten window.location.search manuell aktualisieren. Es wird schwieriger, wenn Sie nicht möchten, dass die Seite neu gezeichnet wird, da dies zu einem Seitenwechsel führt.
Monokrom

38

Ein moderner Ansatz hierfür ist die Verwendung nativer standardbasierter URLSearchParams . Es wird von allen gängigen Browsern unterstützt, mit Ausnahme des IE, in dem Polyfills verfügbar sind

const paramsString = "site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc"
const searchParams = new URLSearchParams(paramsString);
searchParams.set('rows', 10);
console.log(searchParams.toString()); // return modified string.

1
Wäre wirklich schön ... aber es ist nicht so, dass der IE es überhaupt nicht unterstützt, und die Verwendung von Polyfills für so eine kleine Sache kommt überhaupt nicht in Frage.
Forsberg

1
Dadurch wird auch der ursprüngliche paramsString vollständig urlencodes, sodass das Ergebnis site.fwx%3Fposition=1&archiveid=5000&columns=5&rows=10&sorting=ModifiedTimeAscverwirrend aussieht , da es nicht das ist, was Sie erstellt hätten, wenn Sie es manuell ausgeführt hätten ...
Ben Wheeler

1
Es wäre schön, ein Beispiel für die Verwendung zu sehen. Ich meine, wie man einen Params-String von der aktuellen Seite bekommt und wie man ihn danach einstellt
The Godfather

27

Sie können dies auch über normales JS tun

var url = document.URL
var newAdditionalURL = "";
var tempArray = url.split("?");
var baseURL = tempArray[0];
var aditionalURL = tempArray[1]; 
var temp = "";
if(aditionalURL)
{
var tempArray = aditionalURL.split("&");
for ( var i in tempArray ){
    if(tempArray[i].indexOf("rows") == -1){
            newAdditionalURL += temp+tempArray[i];
                temp = "&";
            }
        }
}
var rows_txt = temp+"rows=10";
var finalURL = baseURL+"?"+newAdditionalURL+rows_txt;

Nett! Ich nahm dies und modifizierte es in eine Funktion. Sie senden die aktuelle URL, den gesuchten Parameternamen, den neuen Wert und einen Bool, der angibt, ob Sie den Parameter zur Abfragezeichenfolge hinzufügen möchten, wenn ich ihn dort derzeit nicht finde. Die Funktion gibt die geänderte URL zurück.
Gromer

Gormer, du musst diese Funktion mit anderen teilen :)
Adil Malik

Genialer Ausschnitt. Auch ich habe daraus eine Funktion für meinen eigenen Anwendungsfall gemacht. Danke für das Teilen! +1
robabby

18

Dies ist die moderne Methode zum Ändern von URL-Parametern:

function setGetParam(key,value) {
  if (history.pushState) {
    var params = new URLSearchParams(window.location.search);
    params.set(key, value);
    var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + params.toString();
    window.history.pushState({path:newUrl},'',newUrl);
  }
}

2
Diese Lösung wird derzeit in Internet Explorer 11 nicht unterstützt: caniuse.com/#search=URLSearchParams
WoIIe

Die gleiche Antwort wurde ein halbes Jahr vor Ihnen von @Alister
FantomX1

10

Wäre es eine praktikable Alternative zur String-Manipulation, ein HTML einzurichten formund nur den Wert des rowsElements zu ändern ?

Also, htmldamit ist so etwas wie

<form id='myForm' target='site.fwx'>
    <input type='hidden' name='position' value='1'/>
    <input type='hidden' name='archiveid' value='5000'/>
    <input type='hidden' name='columns' value='5'/>
    <input type='hidden' name='rows' value='20'/>
    <input type='hidden' name='sorting' value='ModifiedTimeAsc'/>
</form>

Mit dem folgenden JavaScript senden Sie das Formular

var myForm = document.getElementById('myForm');
myForm.rows.value = yourNewValue;
myForm.submit();

Wahrscheinlich nicht für alle Situationen geeignet, aber möglicherweise besser als das Parsen der URL-Zeichenfolge.


Das ist klug.
icarito

7

Sie können diese meiner Bibliothek verwenden, um die Arbeit zu erledigen: https://github.com/Mikhus/jsurl

var url = new Url('site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc');
url.query.rows = 10;
alert( url);

4

2020 Lösung : Setzt die Variable oder entfernt sie, wenn Sie übergeben nulloder undefinedauf den Wert.

var setSearchParam = function(key, value) {
    if (!window.history.pushState) {
        return;
    }

    if (!key) {
        return;
    }

    var url = new URL(window.location.href);
    var params = new window.URLSearchParams(window.location.search);
    if (value === undefined || value === null) {
        params.delete(key);
    } else {
        params.set(key, value);
    }

    url.search = params;
    url = url.toString();
    window.history.replaceState({url: url}, null, url);
}

Beachten Sie, dass URLSearchParamsdies nicht in den neuesten Versionen aller gängigen Browser (2020) funktioniert
Oliver Schimmer


Es wird in allen gängigen Browsern außer IE11 unterstützt: caniuse.com/#search=URLSearchParams
Luis Paulo Lohmann

Selbst wenn es unterstützt wurde, wurde dieselbe Antwort mit URLSearchParams in dieser Frage mindestens dreimal beantwortet, bereits am 15. Januar 17 um 15:24 Uhr, am 14. Juni 18 um 15:54 Uhr und am 1. März 19 Uhr 12:46, als ob niemand von euch vor dem Posten Antworten gelesen hätte
FantomX1

Alle Beiträge haben kleinere Probleme, die gelöst werden müssen. Lassen Sie also die Benutzer abstimmen und die beste auswählen.
Alper Ebicoglu

3

Ich habe eine kleine Hilfsfunktion geschrieben, die mit jeder Auswahl funktioniert. Sie müssen lediglich die Klasse "redirectOnChange" zu einem beliebigen Auswahlelement hinzufügen. Dadurch wird die Seite mit einem neuen / geänderten Querystring-Parameter neu geladen, der der ID und dem Wert der Auswahl entspricht, z.

<select id="myValue" class="redirectOnChange"> 
    <option value="222">test222</option>
    <option value="333">test333</option>
</select>

Das obige Beispiel würde "? MyValue = 222" oder "? MyValue = 333" hinzufügen (oder "&" verwenden, wenn andere Parameter vorhanden sind) und die Seite neu laden.

jQuery:

$(document).ready(function () {

    //Redirect on Change
    $(".redirectOnChange").change(function () {
        var href = window.location.href.substring(0, window.location.href.indexOf('?'));
        var qs = window.location.href.substring(window.location.href.indexOf('?') + 1, window.location.href.length);
        var newParam = $(this).attr("id") + '=' + $(this).val();

        if (qs.indexOf($(this).attr("id") + '=') == -1) {
            if (qs == '') {
                qs = '?'
            }
            else {
                qs = qs + '&'
            }
            qs = qs + newParam;

        }
        else {
            var start = qs.indexOf($(this).attr("id") + "=");
            var end = qs.indexOf("&", start);
            if (end == -1) {
                end = qs.length;
            }
            var curParam = qs.substring(start, end);
            qs = qs.replace(curParam, newParam);
        }
        window.location.replace(href + '?' + qs);
    });
});

Mit Abstand die beste Lösung auf dieser Seite
ed209

2

Hier habe ich die Antwort von Adil Malik genommen und die 3 Probleme behoben, die ich damit identifiziert habe.

/**
 * Adds or updates a URL parameter.
 *
 * @param {string} url  the URL to modify
 * @param {string} param  the name of the parameter
 * @param {string} paramVal  the new value for the parameter
 * @return {string}  the updated URL
 */
self.setParameter = function (url, param, paramVal){
  // http://stackoverflow.com/a/10997390/2391566
  var parts = url.split('?');
  var baseUrl = parts[0];
  var oldQueryString = parts[1];
  var newParameters = [];
  if (oldQueryString) {
    var oldParameters = oldQueryString.split('&');
    for (var i = 0; i < oldParameters.length; i++) {
      if(oldParameters[i].split('=')[0] != param) {
        newParameters.push(oldParameters[i]);
      }
    }
  }
  if (paramVal !== '' && paramVal !== null && typeof paramVal !== 'undefined') {
    newParameters.push(param + '=' + encodeURI(paramVal));
  }
  if (newParameters.length > 0) {
    return baseUrl + '?' + newParameters.join('&');
  } else {
    return baseUrl;
  }
}

1

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('sorting', ModifiedTimeAsc));


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

Eine Gegenstimme ohne Kommentar? Was ist los mit dem Code? Es funktioniert fantastisch für viele Situationen.
Bobb Fwed

1

Meine Lösung:

const setParams = (data) => {
    if (typeof data !== 'undefined' && typeof data !== 'object') {
        return
    }

    let url = new URL(window.location.href)
    const params = new URLSearchParams(url.search)

    for (const key of Object.keys(data)) {
        if (data[key] == 0) {
            params.delete(key)
        } else {
            params.set(key, data[key])
        }
    }

    url.search = params
    url = url.toString()
    window.history.replaceState({ url: url }, null, url)
}

Rufen Sie dann einfach "setParams" auf und übergeben Sie ein Objekt mit den Daten, die Sie festlegen möchten.

Beispiel:

$('select').on('change', e => {
    const $this = $(e.currentTarget)
    setParams({ $this.attr('name'): $this.val() })
})

In meinem Fall musste ich eine HTML-Auswahleingabe aktualisieren, wenn sie sich ändert, und wenn der Wert "0" ist, entfernen Sie den Parameter. Sie können die Funktion bearbeiten und den Parameter aus der URL entfernen, wenn der Objektschlüssel ebenfalls "null" ist.

Hoffe das hilft euch allen


Es gibt bereits 2 gleiche Antworten mit URLSearchParams vor Ihnen, als ob keiner von Ihnen wirklich Antworten lesen würde. Gepostet am beantwortet 15. Januar 17 um 15:24, beantwortet 14. Juni 18 um 15:54
FantomX1

0

Eine weitere Variation von Sujoys Antwort. Einfach die Variablennamen geändert und einen Namespace-Wrapper hinzugefügt:

window.MyNamespace = window.MyNamespace  || {};
window.MyNamespace.Uri = window.MyNamespace.Uri || {};

(function (ns) {

    ns.SetQueryStringParameter = function(url, parameterName, parameterValue) {

        var otherQueryStringParameters = "";

        var urlParts = url.split("?");

        var baseUrl = urlParts[0];
        var queryString = urlParts[1];

        var itemSeparator = "";
        if (queryString) {

            var queryStringParts = queryString.split("&");

            for (var i = 0; i < queryStringParts.length; i++){

                if(queryStringParts[i].split('=')[0] != parameterName){

                    otherQueryStringParameters += itemSeparator + queryStringParts[i];
                    itemSeparator = "&";
                }
            }
        }

        var newQueryStringParameter = itemSeparator + parameterName + "=" + parameterValue;

        return baseUrl + "?" + otherQueryStringParameters + newQueryStringParameter;
    };

})(window.MyNamespace.Uri);

Die Nutzung ist jetzt:

var changedUrl = MyNamespace.Uri.SetQueryStringParameter(originalUrl, "CarType", "Ford");

0

Ich habe auch eine Bibliothek zum Abrufen und Festlegen von URL-Abfrageparametern in JavaScript geschrieben .

Hier ist ein Beispiel für seine Verwendung.

var url = Qurl.create()
  , query
  , foo
  ;

Abrufen von Abfrageparametern als Objekt, nach Schlüssel oder Hinzufügen / Ändern / Entfernen.

// returns { foo: 'bar', baz: 'qux' } for ?foo=bar&baz=qux
query = url.query();

// get the current value of foo
foo = url.query('foo');

// set ?foo=bar&baz=qux
url.query('foo', 'bar');
url.query('baz', 'qux');

// unset foo, leaving ?baz=qux
url.query('foo', false); // unsets foo


-1

Ich weiß, dass dies eine alte Frage ist. Ich habe die obige Funktion erweitert, um Abfrageparameter hinzuzufügen oder zu aktualisieren. Immer noch nur eine reine JS-Lösung.

                      function addOrUpdateQueryParam(param, newval, search) {

                        var questionIndex = search.indexOf('?');

                        if (questionIndex < 0) {
                            search = search + '?';
                            search = search + param + '=' + newval;
                            return search;
                        }

                        var regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
                        var query = search.replace(regex, "$1").replace(/&$/, '');

                        var indexOfEquals = query.indexOf('=');

                        return (indexOfEquals >= 0 ? query + '&' : query + '') + (newval ? param + '=' + newval : '');
                    }

-1

Meine Funktion unterstützt das Entfernen von Param

function updateURLParameter(url, param, paramVal, remove = false) {
        var newAdditionalURL = '';
        var tempArray = url.split('?');
        var baseURL = tempArray[0];
        var additionalURL = tempArray[1];
        var rows_txt = '';

        if (additionalURL)
            newAdditionalURL = decodeURI(additionalURL) + '&';

        if (remove)
            newAdditionalURL = newAdditionalURL.replace(param + '=' + paramVal, '');
        else
            rows_txt = param + '=' + paramVal;

        window.history.replaceState('', '', (baseURL + "?" + newAdditionalURL + rows_txt).replace('?&', '?').replace('&&', '&').replace(/\&$/, ''));
    }

-1

Ich habe gerade ein einfaches Modul geschrieben, um das Lesen und Aktualisieren der aktuellen URL-Abfrageparameter zu behandeln.

Anwendungsbeispiel:

import UrlParams from './UrlParams'

UrlParams.remove('foo') //removes all occurences of foo=?
UrlParams.set('foo', 'bar') //set all occurences of foo equal to bar
UrlParams.add('foo', 'bar2') //add bar2 to foo result: foo=bar&foo=bar2
UrlParams.get('foo') //returns bar
UrlParams.get('foo', true) //returns [bar, bar2]

Hier ist mein Code namens UrlParams. (Js / ts):

class UrlParams {

    /**
     * Get params from current url
     * 
     * @returns URLSearchParams
     */
    static getParams(){
        let url = new URL(window.location.href)
        return new URLSearchParams(url.search.slice(1))
    }

    /**
     * Update current url with params
     * 
     * @param params URLSearchParams
     */
    static update(params){
        if(`${params}`){
            window.history.replaceState({}, '', `${location.pathname}?${params}`)
        } else {
            window.history.replaceState({}, '', `${location.pathname}`)
        }
    }

    /**
     * Remove key from url query
     * 
     * @param param string
     */
    static remove(param){
        let params = this.getParams()
        if(params.has(param)){
            params.delete(param)
            this.update(params)
        }
    }

    /**
     * Add key value pair to current url
     * 
     * @param key string
     * @param value string
     */
    static add(key, value){
        let params = this.getParams()
        params.append(key, value)
        this.update(params)
    }

    /**
     * Get value or values of key
     * 
     * @param param string
     * @param all string | string[]
     */
    static get(param, all=false){
        let params = this.getParams()
        if(all){
            return params.getAll(param)
        }
        return params.get(param)
    }

    /**
     * Set value of query param
     * 
     * @param key string
     * @param value string
     */
    static set(key, value){
        let params = this.getParams()
        params.set(key, value)
        this.update(params)
    }

}
export default UrlParams
export { UrlParams }

Es gibt bereits 4 gleiche Antworten, die Sie bereits erwähnt haben. Sie wurden am 15. Januar 17 um 15:24 Uhr beantwortet, am 14. Juni 18 um 15:54 Uhr beantwortet, am 1. März 19 um 12:46 Uhr beantwortet und am 14. Juni 19 um 7 Uhr beantwortet. 20, als ob niemand von euch wirklich Antworten vor dem Posten gelesen hätte
FantomX1

-2
     // usage: clear ; cd src/js/node/js-unit-tests/01-set-url-param ; npm test ; cd -
     // prereqs: , nodejs , mocha
     // URI = scheme:[//authority]path[?paramName1=paramValue1&paramName2=paramValue2][#fragment]
     // call by: uri = uri.setUriParam("as","md")
     String.prototype.setUriParam = function (paramName, paramValue) {
        var uri = this
        var fragment = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1]
        uri = ( uri.indexOf('#') === -1 ) ? uri : uri.split('#')[0]
        if ( uri.indexOf("?") === -1 ) { uri = uri + '?&' }
        uri = uri.replace ( '?' + paramName , '?&' + paramName)
        var toRepl = (paramValue != null) ? ('$1' + paramValue) : ''
        var toSrch = new RegExp('([&]' + paramName + '=)(([^&#]*)?)')
        uri = uri.replace(toSrch,toRepl)
        if (uri.indexOf(paramName + '=') === -1 && toRepl != '' ) {
           var ampersandMayBe = uri.endsWith('&') ? '' : '&'
           uri = uri + ampersandMayBe + paramName + "=" + String(paramValue)
        }
        uri = ( fragment.length == 0 ) ? uri : (uri+"#"+fragment) //may-be re-add the fragment
        return uri
     }

     var assert = require('assert');
     describe('replacing url param value', function () {

        // scheme://authority/path[?p1=v1&p2=v2#fragment
        // a clean url
        it('http://org.com/path -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? with num value
        it('http://org.com/path?prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=57'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? but string value
        it('http://org.com/path?prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=boo-bar'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=boo-bar-baz'
           var uriActual = uri.setUriParam("bid","boo-bar-baz")
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ?& but string value
        it('http://org.com/path?&prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? with other param
        it('http://org.com/path?prm=src_v&other_p=other_v -> http://org.com/path?&prm=tgt_v&other_p=other_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p=other_v'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ?& with other param
        it('http://org.com/path?&prm=src_v&other_p=other_v -> http://org.com/path?&prm=tgt_v&other_p=other_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p&other_v'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p&other_v'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? with other param with fragment
        it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p=other_v#f'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ?& with other param with fragment
        it('http://org.com/path?&prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p&other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p&other_v#f'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // remove the param-name , param-value pair
        it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
           var uriActual = uri.setUriParam("bid",null)
           assert.equal(uriActual, uriExpected);
        });

        // remove the param-name , param-value pair
        it('http://org.com/path?&prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
           var uriActual = uri.setUriParam("bid",null)
           assert.equal(uriActual, uriExpected);
        });

        // add a new param name , param value pair
        it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v&bid=foo-bar#f'
           var uriActual = uri.setUriParam("bid","foo-bar")
           assert.equal(uriActual, uriExpected);
        });

     });
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.