Zmień parametry adresu URL

189

Mam ten adres URL:

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

potrzebuję, aby móc zmienić wartość param adresu URL wiersza na coś, co określam, powiedzmy 10. A jeśli „wiersze” nie istnieją, muszę dodać go na końcu adresu URL i dodać wartość, którą już podałem (10).

Sindre Sorhus
źródło
2
Lekka odpowiedź bez wtyczek: stackoverflow.com/a/10997390/11236
ripper234
11
Nie mogę uwierzyć, że jest rok 2013 i nie ma lepszego sposobu na zrobienie tego, na przykład coś wbudowanego w podstawowe biblioteki przeglądarek.
Tyler Collier,
Zobacz moją odpowiedź na nowoczesne rozwiązanie: stackoverflow.com/a/19965480/64949
Sindre Sorhus
6
@TylerCollier w połowie 2015 roku i wciąż nic :(
Tejas Manohar
3
Wygląda na to, że się tam dostaniemy ... developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/
Chris

Odpowiedzi:

111

Rozszerzyłem kod Sujoy, aby utworzyć funkcję.

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

Wywołania funkcji:

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

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

Zaktualizowana wersja, która zajmuje się także zakotwiczeniami w adresie URL.

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;
}
Adil Malik
źródło
Nie mogę tego zrobić. Oto mój kod: jsfiddle.net/Draven/tTPYL/1 URL powinien wyglądać http://www.domain.com/index.php?action=my_action&view-all=Yesi muszę zmienić wartość „zobacz wszystko”. Moje SO pytanie, które zostało zamknięte: stackoverflow.com/questions/13025880/…
Draven,
Jesteś pewny? z łatwością mi to działało. Sprawdź to tutaj: jsfiddle.net/mw49a
Adil Malik
1
Użyj „var i = 0” zamiast „i = 0”, aby zapobiec tworzeniu / modyfikowaniu i jako zmiennej globalnej.
Jonathan Aquino
1
Kilka innych problemów z tą funkcją: (1) paramVal nie jest kodowany uri. (2) jeśli parametr paramVal ma wartość null, to otrzymasz foo = null. Powinno to być foo = (lub nawet lepiej, usuń foo całkowicie).
Jonathan Aquino
To znacznie ułatwiło mi życie. Wielkie dzięki kolego!
boydenhartog
97

Myślę, że chcesz wtyczki zapytania .

Na przykład:

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

Działa to niezależnie od bieżącego stanu wierszy.

Matthew Flaschen
źródło
Mofle, to dlatego, że wtyczka Query używa decodeURIComponent, a decodeURIComponent („% F8”) jest nieprawidłowy.
Matthew Flaschen
2
Wyciągnij te dziwne rzeczy ze swojego adresu URL. Lub innymi słowy: „zmień ciąg zapytania, tak aby używał tylko prawidłowych znaków UTF-8”. :) Sam F8 nie jest prawidłowym znakiem UTF-8.
Matthew Flaschen
Czy istnieje sposób na odzyskanie podstawowego adresu URL z tej wtyczki? Na przykład, jeśli mój adres URL to „ youtube.com/watch?v=PZootaxRh3M ”, pobierz „ youtube.com/watch
Matt Norris,
3
@Wraith, nie potrzebujesz do tego wtyczki. To jest po prostu window.location.pathname.
Matthew Flaschen
2
@MattNorris Nie potrzebujesz do tego wtyczki, ale prawidłowa odpowiedź to: window.location.host + window.location.pathname W twoim przypadku będzie to „www.youtube.com/watch”
nktssh
68

Aby odpowiedzieć na moje pytanie 4 lata później, po tym, jak wiele się nauczyłem. Zwłaszcza, że ​​nie powinieneś używać jQuery do wszystkiego. Stworzyłem prosty moduł, który może analizować / łańcuchować ciąg zapytania. Ułatwia to modyfikację ciągu zapytania.

Możesz użyć ciągu zapytania w następujący sposób:

// 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);
Sindre Sorhus
źródło
1
Wow, to jest genialnie proste rozwiązanie. Dziękuję Ci!
jetlej
To działa jak mistrz! Dziękuję Sindre 🏆🏆🏆 (wszystko muszę zrobić, to Minify „query-strunowe / index.js” i wkleić go w dolnej części swoich js)
Ronnie Royston
1
Posiadanie dodatkowej biblioteki właśnie do tego wydaje się trochę dodatkową ...
The Godfather
jQuery było za dużo dla 1 funkcji, więc zamiast tego użyłeś maszynopisu, języka travis i kilku innych zależności innych niż dev :)
Justin Meiners
@JustinMeiners Nie komentuj, jeśli nie masz nic przydatnego do wzięcia udziału w rozmowie. W tym projekcie nie używa się TypeScript. Travis jest CI, a nie zależnością.
Sindre Sorhus
64

Szybkie, małe rozwiązanie w czystym js, bez wtyczek:

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

Nazwij to tak:

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

Lub jeśli chcesz pozostać na tej samej stronie i zastąpić wiele parametrów:

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

edit dzięki Luke: Aby usunąć parametr całkowicie mijają falselub nulldla wartości: replaceQueryParam('rows', false, params). Ponieważ 0 jest to również fałsz , określ '0'.

bronson
źródło
2
również, aby usunąć użyty parametr z wyniku, wykonaj następujące czynności: str = replaceQueryParam ('oldparam', false, str) - w zasadzie wstaw wartość typu false
Luke Wenke
1
ma problem, powielam mój parametr bez powodu, sprawdź to podobne rozwiązanie stackoverflow.com/a/20420424/3160597
azerafati
@Bludream ten kod działa w produkcji od lat. Nie widziałem, żeby to powielało parametry. Czy możesz opublikować repro lub bardziej konstruktywne informacje?
bronson,
@Bludream Rozumiem teraz, że skrypt, do którego się dowiązałeś, dodawał zduplikowane parametry. :)
bronson,
1
@dVyper poprawnie, wartość falsy usuwa parametr całkowicie. Użyj tekstu „0” zamiast liczby całkowitej 0
bronson
62

Ben Alman ma tutaj dobrą wtyczkę querystring / url , która pozwala na łatwą manipulację querystring.

Zgodnie z prośbą -

Przejdź do jego strony testowej tutaj

W Firebug wprowadź następujące dane do konsoli

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

Zwróci ci następujący zmieniony ciąg adresu URL

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

Zauważ, że wartość zapytania dla a zmieniła się z X na 3 i dodała nową wartość.

Następnie możesz użyć nowego ciągu adresu URL, jak chcesz, np. Za pomocą document.location = newUrl lub zmienić link kotwiczący itp.

plac Czerwony
źródło
4
Czy to nie jQuery.param.querystring zamiast jQuery.queryString?
Petr Peller
12
TypeError: jQuery.param.querystring is not a function
TMS
1
Aby uniknąć 'TypeError', powinno to być: jQuery.queryString (window.location.href, 'a = 3 & newValue = 100')
kod-gijoe 18.12.12
2
powinieneś zadzwonić jQuery.param.querystring. Chyba przebudowali bibliotekę.
Czy Wu
Żadna z tych funkcji już nie istnieje. Chcesz ręcznie zaktualizować window.location.search. Staje się trudniejszy, jeśli nie chcesz, aby strona była odmalowana, ponieważ spowoduje to zmianę strony.
monokrome
39

Nowoczesne podejście do tego polega na użyciu natywnego standardu URLSearchParams . Jest obsługiwany przez wszystkie główne przeglądarki, z wyjątkiem IE, w którym są dostępne wielopełniacze

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.
Alister
źródło
1
Byłoby naprawdę fajnie ... ale nie jest tak, ponieważ IE w ogóle go nie obsługuje, a używanie polypełniaczy do tak małych rzeczy jest całkowicie wykluczone.
forsberg
1
powoduje to również pełne zakodowanie oryginalnych parStringów, więc wynik wygląda na site.fwx%3Fposition=1&archiveid=5000&columns=5&rows=10&sorting=ModifiedTimeAscmylący, ponieważ nie jest to to, co byś zbudował, gdybyś zrobił to ręcznie ...
Ben Wheeler
1
Byłoby miło zobaczyć przykład, jak z niego korzystać. Chodzi mi o to, jak uzyskać ciąg params z bieżącej strony i jak ustawić go później
Ojciec Chrzestny
27

możesz to zrobić również przez normalny JS

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;
Posto
źródło
Miły! Wziąłem to i zmodyfikowałem w funkcję. Wysyłasz bieżący adres URL, nazwę parametru, którego szukasz, nową wartość i wartość bool informującą, czy chcesz dodać parametr do ciągu zapytania, jeśli go tam nie znajdę. Funkcja zwraca zmodyfikowany adres URL.
Gromer
Gormer, musisz udostępnić tę funkcję innym :)
Adil Malik
Niesamowity fragment kodu. Ja również przekształciłem go w funkcję dla mojego własnego przypadku użycia. Dzięki za udostępnienie! +1
robabby
19

To nowoczesny sposób zmiany parametrów adresu URL:

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);
  }
}
TjerkW
źródło
2
To rozwiązanie nie jest obecnie obsługiwane w programie Internet Explorer 11: caniuse.com/#search=URLSearchParams
WoIIe,
Ta sama odpowiedź została udzielona pół roku przed tobą przez @Alister
FantomX1
10

Czy realną alternatywą dla manipulacji ciągiem byłoby skonfigurowanie html formi po prostu zmodyfikowanie wartości rowselementu?

Więc z htmltym jest coś takiego

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

Za pomocą następującego kodu JavaScript, aby przesłać formularz

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

Prawdopodobnie nie nadaje się do wszystkich sytuacji, ale może być ładniejszy niż parsowanie ciągu adresu URL.

Harry Lime
źródło
To sprytne.
icarito
7

Możesz użyć tej mojej biblioteki do wykonania zadania: 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);
Mikhus
źródło
4

Rozwiązanie 2020 : ustawia zmienną lub usuwa iti, jeśli przejdziesz nulllub undefineddo wartości.

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);
}
Alper Ebicoglu
źródło
Uwaga: URLSearchParamsnie działa w najnowszych wersjach wszystkich głównych przeglądarek (2020)
Oliver Schimmer
Jest obsługiwany we wszystkich głównych przeglądarkach oprócz IE11: caniuse.com/#search=URLSearchParams
Luis Paulo Lohmann
Nawet jeśli zaczęło być obsługiwane, ta sama odpowiedź z URLSearchParams została udzielona w tym pytaniu co najmniej 3 razy już w dniu 15 stycznia o godz. 15:24, w dniu 14 czerwca o godz. 15:54 i w dniu 1 marca 19 o godz. 12:46, jakby nikt z was nie czytał odpowiedzi przed wysłaniem
FantomX1
wszystkie posty mają drobne problemy, które należy rozwiązać. pozwól użytkownikom głosować i wybrać najlepszy.
Alper Ebicoglu
3

Napisałem małą funkcję pomocnika, która działa z dowolnym wyborem. Wszystko, co musisz zrobić, to dodać klasę „redirectOnChange” do dowolnego elementu select, a to spowoduje ponowne załadowanie strony z nowym / zmienionym parametrem zapytania querystring, równym identyfikatorowi i wartości select, np .:

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

W powyższym przykładzie dodano „? MyValue = 222” lub „? MyValue = 333” (lub używając „&”, jeśli istnieją inne parametry) i ponownie załadowaliśmy stronę.

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);
    });
});
Paul Grimshaw
źródło
Zdecydowanie najlepsze rozwiązanie na tej stronie
ed209 14.10.13
2

Tutaj wziąłem odpowiedź Adila Malika i naprawiłem 3 problemy, które z nią zidentyfikowałem.

/**
 * 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;
  }
}
Jonathan Aquino
źródło
1

Oto co robię. Za pomocą mojej funkcji editParams () możesz dodać, usunąć lub zmienić dowolny parametr, a następnie użyć wbudowanej funkcji replaceState (), aby zaktualizować adres URL:

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;
}
Bobb Fwed
źródło
Opinia negatywna bez komentarza? Co jest nie tak z kodem? Działa fantastycznie w wielu sytuacjach.
Bobb Fwed
1

Moje rozwiązanie:

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

Następnie wystarczy wywołać „setParams” i przekazać obiekt z danymi, które chcesz ustawić.

Przykład:

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

W moim przypadku musiałem zaktualizować dane wejściowe html, gdy się zmieniają, a jeśli wartość wynosi „0”, usuń parametr. Możesz edytować funkcję i usunąć parametr z adresu URL, jeśli klucz obiektu ma również wartość „null”.

Mam nadzieję, że to pomoże wszystkim

Benzoes
źródło
istnieją już 2 takie same odpowiedzi z URLSearchParams, jak gdyby nikt z was tak naprawdę nie czytał odpowiedzi. Wysłany odpowiedzi 15 stycznia17 o 15:24, odpowiedzi 14 czerwca 18 o 15:54
FantomX1
0

Kolejna odmiana odpowiedzi Sujoya. Właśnie zmieniłem nazwy zmiennych i dodałem opakowanie przestrzeni nazw:

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

Wykorzystanie jest teraz:

var changedUrl = MyNamespace.Uri.SetQueryStringParameter(originalUrl, "CarType", "Ford");
Appetere
źródło
0

Ja także napisałem bibliotekę do pobierania i ustawiania parametrów zapytań URL w JavaScript .

Oto przykład jego użycia.

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

Uzyskaj parametry zapytania jako obiekt, według klucza lub dodaj / zmień / usuń.

// 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
rb
źródło
-1

Wiem, że to stare pytanie. Ulepszyłem powyższą funkcję, aby dodać lub zaktualizować parametry zapytania. Nadal tylko czyste rozwiązanie JS.

                      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 : '');
                    }
użytkownik3799810
źródło
-1

moja funkcja obsługuje usuwanie parametrów

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(/\&$/, ''));
    }
lossy11
źródło
-1

Właśnie napisałem prosty moduł zajmujący się czytaniem i aktualizowaniem aktualnych parametrów zapytań URL.

Przykładowe użycie:

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]

Oto mój kod o nazwie 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 }
Dieter Gribnitz
źródło
Istnieją już 4 takie same odpowiedzi, o których wspomniałeś, wysłano, odpowiedział 15 stycznia o godz. 15:24, odpowiedział 14 czerwca 18 o 15:54, odpowiedział 1 marca 19 o 12:46 i odpowiedział 14 czerwca 19 o 7: 20, tak jakby nikt z was tak naprawdę nie czytał odpowiedzi przed opublikowaniem
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);
        });

     });
Yordan Georgiev
źródło