URL parametrelerini değiştirme


189

Bu URL'ye sahibim:

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

ihtiyacım olan, 'satırlar' url param değerini belirttiğim bir şeye değiştirebilmektir, diyelim ki 10 'satırlar' yoksa, URL'nin sonuna eklemem ve daha önce belirttiğim değer (10).


2
Hafif, eklentisiz bir cevap: stackoverflow.com/a/10997390/11236
ripper234

11
2013 yılına inanamıyorum ve bunu yapmanın daha iyi bir yolu yok, çekirdek tarayıcı kütüphanelerinde yerleşik bir şey gibi.
Tyler Collier

Modern bir çözüm için cevabımı görün: stackoverflow.com/a/19965480/64949
Sindre Sorhus

6
@TylerCollier 2015 ortası şimdi ve hala hiçbir şey :(
Tejas Manohar

3
Görünüşe göre oraya
chris

Yanıtlar:


111

Bir fonksiyon oluşturmak için Sujoy'un kodunu genişlettim.

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

İşlev Çağrıları:

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

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

URL'deki bağlantılara da dikkat eden güncellenmiş sürüm.

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

Bunun işe yaramasını sağlayamıyorum. İşte benim kod: jsfiddle.net/Draven/tTPYL/1 URL gibi görünecek http://www.domain.com/index.php?action=my_action&view-all=Yesve "tümünü görüntüle" değerini değiştirmek gerekir. Kapatılan SO sorum: stackoverflow.com/questions/13025880/…
Draven

Emin misiniz? benim için kolayca çalıştı. Buradan kontrol edin: jsfiddle.net/mw49a
Adil Malik

1
Global değişken olarak i oluşturulmasını / değiştirilmesini önlemek için "i = 0" yerine "var i = 0" kullanın.
Jonathan Aquino

1
Bu işlevle ilgili diğer birkaç sorun: (1) paramVal uri kodlu değildir. (2) paramVal null ise, foo = null alırsınız. Foo = (ya da daha iyisi, foo'yu tamamen çıkarın) olmalıdır.
Jonathan Aquino

Bu hayatımı çok kolaylaştırdı. Çok teşekkürler dostum!
boydenhartog

97

Sorgu eklentisini istediğinizi düşünüyorum .

Örneğin:

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

Bu, satırların mevcut durumundan bağımsız olarak çalışır.


Mofle, Query eklentisinin decodeURIComponent kullanması ve decodeURIComponent ("% F8") geçersiz olmasıdır.
Matthew Flaschen

2
Bu garip şeyleri URL'nizden çıkarın. Başka bir deyişle, "sorgu dizenizi yalnızca geçerli UTF-8 karakterlerini kullanacak şekilde değiştirin". :) F8 tek başına geçerli bir UTF-8 karakteri değildir.
Matthew Flaschen

Temel URL'yi bu eklentiden almanın bir yolu var mı? Örneğin, URL'm ' youtube.com/watch?v=PZootaxRh3M ' ise, ' youtube.com/watch ' alın
Matt Norris

3
@Wraith, bunun için bir eklentiye ihtiyacınız yok. Sadece window.location.pathname.
Matthew Flaschen

2
@MattNorris Bunun için bir eklentiye ihtiyacınız yok, ancak doğru cevap: window.location.host + window.location.pathname Sizin durumunuzda "www.youtube.com/watch" olacaktır
nktssh

68

4 yıl sonra, çok şey öğrendikten sonra kendi sorumu cevaplamak için. Özellikle her şey için jQuery kullanmamalısınız. Bir sorgu dizesini ayrıştırmak / dizgi olabilir basit bir modül oluşturdum. Bu, sorgu dizesini değiştirmeyi kolaylaştırır.

Query-string'i aşağıdaki gibi kullanabilirsiniz :

// 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
Vay canına, bu çok basit bir çözüm. Teşekkür ederim!
jetlej

Bu bir şampiyon gibi çalışıyor! Teşekkür ederim Sindre 🏆🏆🏆 (tek yapmanız gereken "query-string / index.js" yi küçültmek ve js'inizin altına yapıştırmak)
Ronnie Royston

1
Bunun için fazladan bir kütüphaneye sahip olmak biraz fazladan gibi ...
The Godfather

jQuery 1 işlevi için çok fazlaydı, bunun yerine daktilo, travis ve diğer birkaç geliştirici olmayan bağımlılığı kullandınız :)
Justin Meiners

@JustinMeiners Sohbete katkıda bulunacak yararlı bir şeyiniz yoksa lütfen yorum yapmayın. TypeScript bu proje tarafından kullanılmıyor. Travis bir CI, bağımlılık değil.
Sindre Sorhus

64

Saf js'de hızlı küçük çözüm, eklenti gerekmez:

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

Buna şöyle deyin:

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

Veya, aynı sayfada kalmak ve birden çok parametreyi değiştirmek istiyorsanız:

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

düzenleme, sayesinde Luke: tamamen parametre kaldırmak için, geçiş falseveya nulldeğeri: replaceQueryParam('rows', false, params). Yana 0 falsy da belirtmek '0'.


2
Ayrıca kullanılan bir parametreyi çıktıdan kaldırmak için şunu yapın: str = replaceQueryParam ('oldparam', false, str) - temelde yanlış tip değeri koy
Luke Wenke

1
sorun var, parametremi yineleme için iyi bir neden yok, bu benzer çözümü inceleyin stackoverflow.com/a/20420424/3160597
azerafati

@Bludream bu kod yıllardır üretimde çalışıyor. Henüz bir param yinelediğini görmedim. Bir repro veya daha yapıcı bir bilgi gönderebilir misiniz?
bronson

@Bludream Anlıyorum, bağlandığınız komut dosyası yinelenen parametreler ekliyordu. :)
bronson

1
@ dVyper correct, falsy değeri parametreyi tamamen kaldırır. 0 tamsayı yerine '0' metnini kullanın
bronson

62

Ben Alman, burada sorgu dizesini kolayca kullanmanıza izin veren iyi bir jquery sorgu dizesi / url eklentisine sahiptir.

İstendiği gibi -

Test sayfasını buraya getirin

Firebug'da konsola aşağıdakileri girin

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

Size aşağıdaki değiştirilmiş URL dizesini döndürür

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

A'nın sorgu dizesi değerinin X'ten 3'e değiştiğine ve yeni değeri eklediğine dikkat edin.

Daha sonra yeni url dizesini istediğiniz gibi kullanabilirsiniz, örneğin document.location = newUrl kullanarak veya bağlantı bağlantısını vb.


4
JQuery.queryString yerine jQuery.param.querystring değil mi?
Petr Peller

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

1
'TypeError'dan kaçınmak için: jQuery.queryString (window.location.href,' a = 3 & newValue = 100 ')
code-gijoe

2
aramalısın jQuery.param.querystring. Sanırım kütüphaneyi yeniden düzenlediler.
Wu

Bu işlevlerin hiçbiri artık mevcut değil. Window.location.search öğesini manuel olarak güncellemek istiyorsunuz. Sayfanın yeniden boyanmasını istemiyorsanız daha zor olur, çünkü bu bir sayfa değişikliğine neden olur.
monokrome

39

Buna modern bir yaklaşım yerel standart tabanlı URLSearchParams kullanmaktır . Onlar ediyoruz polyfills IE dışındaki tüm büyük tarayıcılar tarafından desteklenen mevcut

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
Gerçekten güzel olurdu ... ama IE hiç desteklemiyor gibi değil ve böyle küçük bir şey için çoklu dolgu kullanmak tamamen söz konusu değil.
forsberg

1
Bu aynı zamanda orijinal paramallerin kodunu da tam olarak gösterir, bu yüzden sonuç site.fwx%3Fposition=1&archiveid=5000&columns=5&rows=10&sorting=ModifiedTimeAsckafa karıştırıcı gibi görünür çünkü manuel olarak yapsaydınız inşa edeceğiniz şey bu değildir ...
Ben Wheeler

1
Nasıl kullanılacağına dair bir örnek görmek güzel olurdu. Demek istediğim, geçerli sayfadan params dizesi nasıl alınır ve daha sonra nasıl ayarlanır
The Godfather

27

normal JS ile de yapabilirsiniz

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;

Güzel! Bunu aldım ve bir işlev haline getirdim. Geçerli URL'yi, aradığınız parametre adını, yeni değeri ve şu anda orada bulamazsam parametreyi sorgu dizesine eklemek isteyip istemediğinizi söyleyen bir bool gönderirsiniz. İşlev değiştirilen URL'yi döndürür.
Gromer

Gormer, bu işlevi başkalarıyla paylaşmalısın :)
Adil Malik

Harika snippet. Ben de kendi kullanım durumum için bir fonksiyona çevirdim. Paylaşım için teşekkürler! +1
robabby

19

URL parametrelerini değiştirmenin modern yolu budur:

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
Bu çözüm şu anda Internet Explorer 11'de desteklenmemektedir: caniuse.com/#search=URLSearchParams
WoIIe

Aynı yanıt sizden yarım yıl önce @Alister
FantomX1

10

String manipülasyonuna uygun bir alternatif, bir html oluşturmak formve sadece rowsöğenin değerini değiştirmek mi?

Yani, htmlbunun gibi bir şey

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

Formu göndermek için aşağıdaki JavaScript ile

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

Muhtemelen tüm durumlar için uygun değildir, ancak URL dizesini ayrıştırmaktan daha hoş olabilir.


Bu akıllıca bir soru.
icarito

7

Bunu yapmak için kütüphanemi kullanabilirsiniz: 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 Çözüm : değişkeni ayarlar nullveya undefineddeğeri iletirseniz veya değeri kaldırır .

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

URLSearchParamsTüm büyük tarayıcıların (2020) en son sürümlerinde çalışmadığını unutmayın
Oliver Schimmer


IE11 dışındaki tüm büyük tarayıcılarda desteklenir: caniuse.com/#search=URLSearchParams
Luis Paulo Lohmann

Desteklenmeye başlasa bile, URLSearchParams ile aynı cevap bu soruda en azından 3 kez 15 Ocak 17: 15'te cevaplandı, 14 Haziran 18, 15: 54'te cevaplandı ve 12:46, sanki hiç kimse göndermeden önce cevapları okumuyormuş gibi
FantomX1

tüm gönderilerin çözülmesi gereken küçük sorunları vardır. kullanıcıların oy kullanmasına ve en iyisini seçmesine izin verin.
Alper Ebicoglu

3

Herhangi bir seçim ile çalışan küçük bir yardımcı fonksiyon yazdım. Tüm yapmanız gereken herhangi bir seçim öğesine "redirectOnChange" sınıfını eklemektir ve bu, sayfanın select / id değerine eşit yeni / değiştirilmiş bir sorgu dizesi parametresiyle yeniden yüklenmesine neden olur, örneğin:

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

Yukarıdaki örnekte "? MyValue = 222" veya "? MyValue = 333" eklenir (veya başka parametreler varsa "&" kullanılır) ve sayfa yeniden yüklenir.

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

Bu sayfadaki en iyi çözüm
ed209

2

Burada Adil Malik'in cevabını aldım ve tanımladığım 3 sorunu düzelttim.

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

İşte yaptığım şey. EditParams () işlevimi kullanarak, herhangi bir parametre ekleyebilir, kaldırabilir veya değiştirebilirsiniz, ardından URL'yi güncellemek için yerleşik replaceState () işlevini kullanabilirsiniz:

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

Yorum içermeyen bir aşağı oy? Koddaki sorun ne? Birçok durum için harika çalışıyor.
Bobb Fwed

1

Çözümüm:

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

Sonra "setParams" çağırın ve ayarlamak istediğiniz verileri içeren bir nesne iletin.

Misal:

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

Benim durumumda, değiştiğinde bir html seçim girdisini güncellemek zorunda kaldım ve değer "0" ise parametreyi kaldırın. Nesne anahtarı da "null" ise işlevi düzenleyebilir ve parametreyi url'den kaldırabilirsiniz.

Umarım bu sana yardımcı olur


URLSearchParams ile önünüzde zaten 2 yanıt var, sanki hiç kimse gerçekten cevap okumuyormuş gibi. Yayınlanan cevap Jan 15 '17 15:24, Cevap 14 Haziran 18 '15:54
'15

0

Sujoy'un cevabındaki bir başka varyasyon. Sadece değişken adlarını değiştirdi ve bir ad alanı sarıcısı ekledi:

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

Kullanım hızı şimdi:

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

0

JavaScript'te URL sorgu parametrelerini almak ve ayarlamak için de bir kitaplık yazdım .

İşte kullanımının bir örneği.

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

Sorgu parametrelerini bir nesne olarak, anahtarla alın veya ekle / değiştir / kaldır.

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

Bunun eski bir soru olduğunu biliyorum. Sorgu parametrelerini eklemek veya güncellemek için yukarıdaki işlevi geliştirdim. Hala sadece saf bir JS çözümü.

                      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

benim fonksiyon desteği param kaldırma

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

Sadece mevcut url sorgu parametrelerini okumak ve güncellemek için basit bir modül yazdım.

Örnek kullanım:

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]

İşte UrlParams adlı benim kod. (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 }

Daha önce de bahsettiğiniz gibi 4 aynı yanıt var, 15 Ocak 'ta 15:24, 14 Haziran 18' 15:54 'de cevap verdi, 1 Mart 19: 12:46' da cevap verdi ve 14 Haziran 19 'da 7: 20, sanki hiç kimse göndermeden önce cevapları
okumuyormuş gibi

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

     });
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.