Adding a parameter to the URL with JavaScript

Asked 28/1, 2009 at 8:33 Answered 13/3, 2023 at 7:41

Solved javascript url parsing parameters query-string

520

In a web application that makes use of AJAX calls, I need to submit a request but add a parameter to the end of the URL, for example:

Original URL:

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

Resulting URL:

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

Looking for a JavaScript function which parses the URL looking at each parameter, then adds the new parameter or updates the value if one already exists.

Swam answered 28/1, 2009 at 8:33 Comment(6)

Have you searched for javascript url parsers ? You could make your own, splitting on every &-character, but it's probably easier just to use existing code. – Fuse 28/1, 2009 at 8:38

I had a similar scenario once and I found this article by Peter Bromberg very helpful : – Bedmate 28/1, 2009 at 9:1

window.history.pushState('page2', 'Title', document.location+'/page2.php'); will do your work without loading page – Node 4/11, 2015 at 6:33

This question have better answers here #6954444 – Diarrhea 12/1, 2017 at 12:53

unbelievable this isnt native in this poor language that JS is.... – Morissa 8/6, 2018 at 10:33

This is very nice and lightweight library: medialize.github.io/URI.js – Statesman 28/10, 2019 at 12:8

238

A basic implementation which you'll need to adapt would look something like this:

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

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

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

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

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

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

This is approximately twice as fast as a regex or search based solution, but that depends completely on the length of the querystring and the index of any match

the slow regex method I benchmarked against for completions sake (approx +150% slower)

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

    var s = document.location.search;
    var kvp = key+"="+value;

    var r = new RegExp("(&|\\?)"+key+"=[^\&]*");

    s = s.replace(r,"$1"+kvp);

    if(!RegExp.$1) {s += (s.length>0 ? '&' : '?') + kvp;};

    //again, do what you will here
    document.location.search = s;
}

Traduce answered 28/1, 2009 at 9:50 Comment(13)

thanks again. see lessanvaezi.com/wp-content/uploads/2009/01/test.html for a basic comparison of the methods – Swam 28/1, 2009 at 20:13

Nice function, annakata :) but in many cases, url parameters are case insensitive. Wouldn't it be wise to make the function case insensitive as well? – Pestalozzi 19/11, 2010 at 9:50

Using escape() to escape URL parameters is wrong. It breaks for values with "+" in them. You should be using encodeURIComponent instead. Full discussion: xkr.us/articles/javascript/encode-compare – Aghast 9/6, 2011 at 17:52

I am calling this function and the page is reloading in infinite loop. Please help! – Overcompensation 24/7, 2011 at 16:34

@iSumitG instead of location.search you can use location.hash so it won't reload ... just replace all the instances of location.search with location.hash – Fidellas 12/9, 2011 at 16:40

@Darwin I wouldn't say it is wrong, just different from what you might expect. One could just as easily say it is wrong to use values with + in them. – Kaila 1/12, 2011 at 2:51

Top implementation doesn't handle empty location.search properly. See Mehdi's answer for updated solution. – Kaila 1/12, 2011 at 22:38

when no parameters are already in the url you get a ?&param=value – Jasik 23/8, 2012 at 12:44

and this function doesn't support multiple addition of querystring. – Brickkiln 18/3, 2013 at 10:0

Shouldn't you be using encodeURIComponent rather than encodeURI? Otherwise any characters like =, & in your name or value will corrupt the URI. – Nievesniflheim 12/5, 2014 at 21:38

I was inspired by the first solution - good idea, but not-readable code and it does not support more params at once, so I've made a new one that does accept an object with key: value, pairs and it is easily understand-able jsfiddle.net/1u9fqad3/1 UPDATE: fixed case when document.location.search is empty or 1 char – Perseus 8/7, 2016 at 19:33

downvoted because it has bugs that were never fixed :) – Experimentalize 7/12, 2016 at 14:20

Worked great! Also implemented a removeParam by replacing the for/if section with a .splice(idx, 1) and removing the if(i >= kvp.length){ block – Dank 11/6, 2021 at 21:19

718

You can use one of these:

Example:

var url = new URL("http://foo.bar/?x=1&y=2");

// If your expected result is "http://foo.bar/?x=1&y=2&x=42"
url.searchParams.append('x', 42);

// If your expected result is "http://foo.bar/?x=42&y=2"
url.searchParams.set('x', 42);

You can use url.href or url.toString() to get the full URL

Glennaglennie answered 24/5, 2017 at 14:12 Comment(16)

I'd like to add a query parameter without a value, e.g. adding XML to http://foo.bar/?x=1&y=2 so that the end result is http://foo.bar/?x=1&y=2&XML. Is this possible? I tried url.searchParams.set('XML');, url.searchParams.set('XML', null);, and url.searchParams.set('XML', undefined); - but none worked in Chrome 63. – Bass 29/12, 2017 at 15:4

Thanks! Too bad it is not supported by iOS, yet. developer.mozilla.org/en-US/docs/Web/API/URLSearchParams – Sandfly 18/3, 2018 at 3:35

Too bad IE doesn't support it. – Woodsman 20/3, 2018 at 8:34

iOS does now support URLSearchParams (since 9 days after @kanji's comment) – Condom 27/3, 2018 at 16:29

Good news @MJeffryes! Still not supported by IE and Netscape. – Glennaglennie 28/3, 2018 at 19:48

Yes it's bad supported by IE, but there is a polyfill that can handle that: github.com/lifaon74/url-polyfill – Chaiken 26/3, 2019 at 0:29

Are you sure you can modify the URLs searchParams like that? The doc says the property is readonly allowing get access. – Marque 12/12, 2019 at 16:48

url.searchParams is a read-only reference to a URLSearchParams object. It means than you cannot do: url.searchParam = new URLSearchParam(); But you can modify in-place the content of the object using .set(). It's like: const a = {b: 0} You cannot modify the reference: a = {b: 1} but you can modify the content of the object in-place: a.b = 1 Try it in your JS console ;-) – Glennaglennie 12/12, 2019 at 21:48

This is definitely the best answer in 2020 (2021) - if your target browser(s) don't support it, I suggest using a polyfill (e.g. from polyfill.io) – Stocktaking 18/1, 2021 at 15:42

@Abdull, have you tried url.searchParams.set('XML', '')? – Gasper 24/3, 2021 at 7:7

@AndreyMikhaylov-lolmaus, certainly, you haven't tried url.searchParams.set('XML', '') either, because it doesn't work. – Bass 25/3, 2021 at 8:1

@Bass You're right, I hadn't tried it. But I've tried it just now and it does work. Why wouldn't it? const foo = new URLSearchParams(); foo.set('XML', ''); foo.toString() // => "XML=" – Gasper 25/3, 2021 at 11:5

@AndreyMikhaylov-lolmaus, read my initial question again. XML vs XML=. – Bass 25/3, 2021 at 23:17

if you use searchParams.add('x', null) it will generate ?x=null which will most likely not be what you expect – Portfire 10/12, 2021 at 15:3

IE choose Death over accepting this. – Apsis 2/4 at 4:36

IE is dead on 2022-06-15 – Glennaglennie 3/4 at 5:23

260

You can use URLSearchParams

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

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

window.location.search = urlParams;

.set first agrument is the key, the second one is the value.

Note: this is not supported in any version of Internet Explorer (but is supported in Edge)

Kletter answered 8/7, 2019 at 10:34 Comment(13)

Love the simplicity of this and that it uses native browser methods – Unopened 7/8, 2019 at 1:16

This is the correct answer and should be top-voted. This new API is the definitive for URL processing – Exfoliate 1/2, 2020 at 2:34

The URLSearchParams in this answer is not supported by IE. docs – Nobelium 25/10, 2020 at 14:20

Is IE still relevant? As Edge is here now? – Mitigate 2/1, 2021 at 9:56

IE is still relevant if you are targeting Government (June, 2021). – Cherokee 5/6, 2021 at 14:2

you have my 150 upvotes. Also, have a cookie! – Triboelectricity 2/8, 2021 at 5:23

Kinda clunky for a definitive API. Wish it was a one liner. – Clere 19/10, 2021 at 12:4

Doesn't work on url has no query, like /abc/ – Arondell 3/6, 2022 at 10:11

@Arondell In what way does it not work? – Snapback 3/8, 2022 at 17:58

In response to the comments about relevance to Internet Explorer, it was retired on 15 June 2022. RIP ⚰️ – Terrellterrena 19/7, 2023 at 13:44

This is correct, but need to add .toString() to the UrlParams in the last line. – Seedling 20/7, 2023 at 22:8

Any way to do this without reloading the page? – Jarman 23/8, 2023 at 3:37

@Seedling Actually, no you don't need to do that – Kletter 29/1 at 9:23

238

A basic implementation which you'll need to adapt would look something like this:

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

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

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

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

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

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

This is approximately twice as fast as a regex or search based solution, but that depends completely on the length of the querystring and the index of any match

the slow regex method I benchmarked against for completions sake (approx +150% slower)

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

    var s = document.location.search;
    var kvp = key+"="+value;

    var r = new RegExp("(&|\\?)"+key+"=[^\&]*");

    s = s.replace(r,"$1"+kvp);

    if(!RegExp.$1) {s += (s.length>0 ? '&' : '?') + kvp;};

    //again, do what you will here
    document.location.search = s;
}