Updating existing URL querystring values with jQuery

Let's say I have a url such as:

http://www.example.com/hello.png?w=100&h=100&bg=white

What I'd like to do is update the values of the w and h querystring, but leave the bg querystring intact, for example:

http://www.example.com/hello.png?w=200&h=200&bg=white

So what's the fastest most efficient way to read the querystring values (and they could be any set of querystring values, not just w, h, and bg), update a few or none of the values, and return the full url with the new querystring?

So:

Get the values of each querystring key

Update any number of the keys

Rebuild the url with the new values

Keep all of the other values which weren't updated

It will not have a standard set of known keys, it could change per URL

edited Mar 8 '12 at 17:44

rid

38.9k18120166

asked Mar 8 '12 at 17:41

adam

1,95352544

add a comment |

Let's say I have a url such as:

http://www.example.com/hello.png?w=100&h=100&bg=white

What I'd like to do is update the values of the w and h querystring, but leave the bg querystring intact, for example:

http://www.example.com/hello.png?w=200&h=200&bg=white

So:

Get the values of each querystring key

Update any number of the keys

Rebuild the url with the new values

Keep all of the other values which weren't updated

It will not have a standard set of known keys, it could change per URL

edited Mar 8 '12 at 17:44

rid

38.9k18120166

asked Mar 8 '12 at 17:41

adam

1,95352544

add a comment |

Let's say I have a url such as:

http://www.example.com/hello.png?w=100&h=100&bg=white

What I'd like to do is update the values of the w and h querystring, but leave the bg querystring intact, for example:

http://www.example.com/hello.png?w=200&h=200&bg=white

So:

Get the values of each querystring key

Update any number of the keys

Rebuild the url with the new values

Keep all of the other values which weren't updated

It will not have a standard set of known keys, it could change per URL

edited Mar 8 '12 at 17:44

rid

38.9k18120166

asked Mar 8 '12 at 17:41

adam

1,95352544

Let's say I have a url such as:

http://www.example.com/hello.png?w=100&h=100&bg=white

What I'd like to do is update the values of the w and h querystring, but leave the bg querystring intact, for example:

http://www.example.com/hello.png?w=200&h=200&bg=white

So:

Get the values of each querystring key

Update any number of the keys

Rebuild the url with the new values

Keep all of the other values which weren't updated

It will not have a standard set of known keys, it could change per URL

javascript jquery query-string

edited Mar 8 '12 at 17:44

rid

38.9k18120166

asked Mar 8 '12 at 17:41

adam

1,95352544

edited Mar 8 '12 at 17:44

rid

38.9k18120166

asked Mar 8 '12 at 17:41

adam

1,95352544

edited Mar 8 '12 at 17:44

rid

38.9k18120166

edited Mar 8 '12 at 17:44

rid

38.9k18120166

edited Mar 8 '12 at 17:44

rid

38.9k18120166

asked Mar 8 '12 at 17:41

adam

1,95352544

asked Mar 8 '12 at 17:41

adam

1,95352544

asked Mar 8 '12 at 17:41

adam

1,95352544

add a comment |

8 Answers
8

active

oldest

votes

Get query string values this way and use $.param to rebuild query string

UPDATE:

This is an example, also check fiddle:

  function getQueryVariable(url, variable) {

  	 var query = url.substring(1);

     var vars = query.split('&');

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

          var pair = vars[i].split('=');

          if (pair[0] == variable) {

            return pair[1];

          }

     }



     return false;

  }



  var url = 'http://www.example.com/hello.png?w=100&h=100&bg=white';

       

  var w = getQueryVariable(url, 'w');

  var h = getQueryVariable(url, 'h');

  var bg = getQueryVariable(url, 'bg');



  // http://www.example.com/hello.png?w=200&h=200&bg=white

  var params = { 'w':200, 'h':200, 'bg':bg };

  var new_url = 'http://www.example.com/hello.png?' + jQuery.param(params);

You can change the function to use current url:

  function getQueryVariable(variable) {

  	 var query = window.location.search.substring(1);

     var vars = query.split('&');

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

          var pair = vars[i].split('=');

          if (pair[0] == variable) {

            return pair[1];

          }

     }



     return false;

  }

edited May 23 '17 at 12:17

Community♦

answered Mar 8 '12 at 17:46

dotoree

2,73011826

what if we need to update just some of the variables and we have a lot of variables in url that we are not going to update?

– Ahmed Ali
Apr 7 '17 at 19:02

add a comment |

Another way (independent of jQuery or other libraries): https://github.com/Mikhus/jsurl

var u = new Url;

// or

var u = new Url('/some/path?foo=baz');

alert(u);

u.query.foo = 'bar';

alert(u);

answered Apr 19 '13 at 7:33

Mikhus

1,039118

This library is now called domurl. GitHub is redirecting to the correct repo, just posting here in case that ever changes.

– vaindil
Apr 14 '17 at 14:04

add a comment |

//update URL Parameter

function updateURL(key,val){

    var url = window.location.href;

    var reExp = new RegExp("[?|&]"+key + "=[0-9a-zA-Z_+-|.,;]*");



    if(reExp.test(url)) {

        // update

        var reExp = new RegExp("[?&]" + key + "=([^&#]*)");

        var delimiter = reExp.exec(url)[0].charAt(0);

        url = url.replace(reExp, delimiter + key + "=" + val);

    } else {

        // add

        var newParam = key + "=" + val;

        if(!url.indexOf('?')){url += '?';}



        if(url.indexOf('#') > -1){

            var urlparts = url.split('#');

            url = urlparts[0] +  "&" + newParam +  (urlparts[1] ?  "#" +urlparts[1] : '');

        } else {

            url += "&" + newParam;

        }

    }

    window.history.pushState(null, document.title, url);

}

edited May 9 '17 at 19:50

FiSH GRAPHICS

97121024

answered Sep 10 '15 at 13:54

hitchhikers

311

This is a convenient function, but it will not work if the url has no query params from the start, but hash a '#'. You can fix this by changing the indexOf line to (url.indexOf('?') === -1)

– leo
Jan 18 '17 at 18:39

(It will also output ?&key=val, in case of only one url param)

– leo
Jan 18 '17 at 18:39

add a comment |

Simple solution

You can use URLSearchParams.set() like below:

var currentUrl = 'http://www.example.com/hello.png?w=100&h=100&bg=white';

var url = new URL(currentUrl);

url.searchParams.set("w", "200"); // setting your param

var newUrl = url.href; 

console.log(newUrl);

Online demo (jsfiddle)

answered Jun 27 '18 at 9:50

Ali Soltani

6,3622829

add a comment |

My URL is like this: http://localhost/dentistryindia/admin/hospital/add_procedure?hid=241&hpr_id=12

var reExp = /hpr_id=\d+/;

var url = window.location.href;

url = url.toString(); 

var hrpid = $("#category :selected").val(); //new value to replace hpr_id

var reExp = new RegExp("[\?&]" + 'hpr_id' + "=([^&#]*)"),

delimeter = reExp.exec(url)[0].charAt(0),

newUrl = url.replace(reExp, delimeter + 'hpr_id' + "=" + hrpid);

window.location.href = newUrl;

This is how it worked for me.

answered Jul 2 '15 at 8:51

chandoo

68511120

add a comment |

Another way you you can do this, using some simple reg ex code by Samuel Santos here like this:

/*

 * queryParameters -> handles the query string parameters

 * queryString -> the query string without the fist '?' character

 * re -> the regular expression

 * m -> holds the string matching the regular expression

 */

var queryParameters = {}, queryString = location.search.substring(1),

        re = /([^&=]+)=([^&]*)/g, m;



// Creates a map with the query string parameters

while (m = re.exec(queryString)) {

    queryParameters[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);

}



// Update w and h

queryParameters['w'] = 200;

queryParameters['h'] = 200;

Now you can either create a new URL:

var url = window.location.protocol + '//' + window.location.hostname + window.location.pathname;



// Build new Query String

var params = $.param(queryParameters);

if (params != '') {

    url = url + '?' + params;

}

OR you could just use the params to cause browser to reload right away:

location.search = params;

OR do whatever you want with :)

edited Nov 27 '15 at 21:33

answered Nov 27 '15 at 21:27

PanPipes

3,89611020

add a comment |

You could do something like this:

// If key exists updates the value

if (location.href.indexOf('key=') > -1) {

    location.href = location.href.replace('key=current_val', 'key=new_val');



// If not, append

} else {

     location.href = location.href + '&key=new_val';

}

Regards

answered May 27 '16 at 3:38

Nicolas Finelli

2,0261106

add a comment |

I like Ali's answer the best. I cleaned up the code into a function and thought I would share it to make someone else's life easier. Hope this helps someone.

function addParam(currentUrl,key,val) {

    var url = new URL(currentUrl);

    url.searchParams.set(key, val);

    return url.href; 

}

answered Nov 20 '18 at 3:15

user1254723

646

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f9622207%2fupdating-existing-url-querystring-values-with-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

8 Answers
8

active

oldest

votes

8 Answers
8

active

oldest

votes

Get query string values this way and use $.param to rebuild query string

UPDATE:

This is an example, also check fiddle:

  function getQueryVariable(url, variable) {

  	 var query = url.substring(1);

     var vars = query.split('&');

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

          var pair = vars[i].split('=');

          if (pair[0] == variable) {

            return pair[1];

          }

     }



     return false;

  }



  var url = 'http://www.example.com/hello.png?w=100&h=100&bg=white';

       

  var w = getQueryVariable(url, 'w');

  var h = getQueryVariable(url, 'h');

  var bg = getQueryVariable(url, 'bg');



  // http://www.example.com/hello.png?w=200&h=200&bg=white

  var params = { 'w':200, 'h':200, 'bg':bg };

  var new_url = 'http://www.example.com/hello.png?' + jQuery.param(params);

You can change the function to use current url:

  function getQueryVariable(variable) {

  	 var query = window.location.search.substring(1);

     var vars = query.split('&');

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

          var pair = vars[i].split('=');

          if (pair[0] == variable) {

            return pair[1];

          }

     }



     return false;

  }

edited May 23 '17 at 12:17

Community♦

answered Mar 8 '12 at 17:46

dotoree

2,73011826

what if we need to update just some of the variables and we have a lot of variables in url that we are not going to update?

– Ahmed Ali
Apr 7 '17 at 19:02

add a comment |

Get query string values this way and use $.param to rebuild query string

UPDATE:

This is an example, also check fiddle:

  function getQueryVariable(url, variable) {

  	 var query = url.substring(1);

     var vars = query.split('&');

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

          var pair = vars[i].split('=');

          if (pair[0] == variable) {

            return pair[1];

          }

     }



     return false;

  }



  var url = 'http://www.example.com/hello.png?w=100&h=100&bg=white';

       

  var w = getQueryVariable(url, 'w');

  var h = getQueryVariable(url, 'h');

  var bg = getQueryVariable(url, 'bg');



  // http://www.example.com/hello.png?w=200&h=200&bg=white

  var params = { 'w':200, 'h':200, 'bg':bg };

  var new_url = 'http://www.example.com/hello.png?' + jQuery.param(params);

You can change the function to use current url:

  function getQueryVariable(variable) {

  	 var query = window.location.search.substring(1);

     var vars = query.split('&');

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

          var pair = vars[i].split('=');

          if (pair[0] == variable) {

            return pair[1];

          }

     }



     return false;

  }

edited May 23 '17 at 12:17

Community♦

answered Mar 8 '12 at 17:46

dotoree

2,73011826

what if we need to update just some of the variables and we have a lot of variables in url that we are not going to update?

– Ahmed Ali
Apr 7 '17 at 19:02

add a comment |

Get query string values this way and use $.param to rebuild query string

UPDATE:

This is an example, also check fiddle:

  function getQueryVariable(url, variable) {

  	 var query = url.substring(1);

     var vars = query.split('&');

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

          var pair = vars[i].split('=');

          if (pair[0] == variable) {

            return pair[1];

          }

     }



     return false;

  }



  var url = 'http://www.example.com/hello.png?w=100&h=100&bg=white';

       

  var w = getQueryVariable(url, 'w');

  var h = getQueryVariable(url, 'h');

  var bg = getQueryVariable(url, 'bg');



  // http://www.example.com/hello.png?w=200&h=200&bg=white

  var params = { 'w':200, 'h':200, 'bg':bg };

  var new_url = 'http://www.example.com/hello.png?' + jQuery.param(params);

You can change the function to use current url:

  function getQueryVariable(variable) {

  	 var query = window.location.search.substring(1);

     var vars = query.split('&');

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

          var pair = vars[i].split('=');

          if (pair[0] == variable) {

            return pair[1];

          }

     }



     return false;

  }

edited May 23 '17 at 12:17

Community♦

answered Mar 8 '12 at 17:46

dotoree

2,73011826

Get query string values this way and use $.param to rebuild query string

UPDATE:

This is an example, also check fiddle:

  function getQueryVariable(url, variable) {

  	 var query = url.substring(1);

     var vars = query.split('&');

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

          var pair = vars[i].split('=');

          if (pair[0] == variable) {

            return pair[1];

          }

     }



     return false;

  }



  var url = 'http://www.example.com/hello.png?w=100&h=100&bg=white';

       

  var w = getQueryVariable(url, 'w');

  var h = getQueryVariable(url, 'h');

  var bg = getQueryVariable(url, 'bg');



  // http://www.example.com/hello.png?w=200&h=200&bg=white

  var params = { 'w':200, 'h':200, 'bg':bg };

  var new_url = 'http://www.example.com/hello.png?' + jQuery.param(params);

You can change the function to use current url:

  function getQueryVariable(variable) {

  	 var query = window.location.search.substring(1);

     var vars = query.split('&');

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

          var pair = vars[i].split('=');

          if (pair[0] == variable) {

            return pair[1];

          }

     }



     return false;

  }

  function getQueryVariable(url, variable) {

  	 var query = url.substring(1);

     var vars = query.split('&');

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

          var pair = vars[i].split('=');

          if (pair[0] == variable) {

            return pair[1];

          }

     }



     return false;

  }



  var url = 'http://www.example.com/hello.png?w=100&h=100&bg=white';

       

  var w = getQueryVariable(url, 'w');

  var h = getQueryVariable(url, 'h');

  var bg = getQueryVariable(url, 'bg');



  // http://www.example.com/hello.png?w=200&h=200&bg=white

  var params = { 'w':200, 'h':200, 'bg':bg };

  var new_url = 'http://www.example.com/hello.png?' + jQuery.param(params);

  function getQueryVariable(url, variable) {

  	 var query = url.substring(1);

     var vars = query.split('&');

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

          var pair = vars[i].split('=');

          if (pair[0] == variable) {

            return pair[1];

          }

     }



     return false;

  }



  var url = 'http://www.example.com/hello.png?w=100&h=100&bg=white';

       

  var w = getQueryVariable(url, 'w');

  var h = getQueryVariable(url, 'h');

  var bg = getQueryVariable(url, 'bg');



  // http://www.example.com/hello.png?w=200&h=200&bg=white

  var params = { 'w':200, 'h':200, 'bg':bg };

  var new_url = 'http://www.example.com/hello.png?' + jQuery.param(params);

  function getQueryVariable(variable) {

  	 var query = window.location.search.substring(1);

     var vars = query.split('&');

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

          var pair = vars[i].split('=');

          if (pair[0] == variable) {

            return pair[1];

          }

     }



     return false;

  }

  function getQueryVariable(variable) {

  	 var query = window.location.search.substring(1);

     var vars = query.split('&');

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

          var pair = vars[i].split('=');

          if (pair[0] == variable) {

            return pair[1];

          }

     }



     return false;

  }

edited May 23 '17 at 12:17

Community♦

answered Mar 8 '12 at 17:46

dotoree

2,73011826

edited May 23 '17 at 12:17

Community♦

edited May 23 '17 at 12:17

Community♦

edited May 23 '17 at 12:17

Community♦

answered Mar 8 '12 at 17:46

dotoree

2,73011826

answered Mar 8 '12 at 17:46

dotoree

2,73011826

answered Mar 8 '12 at 17:46

dotoree

2,73011826

what if we need to update just some of the variables and we have a lot of variables in url that we are not going to update?

– Ahmed Ali
Apr 7 '17 at 19:02

add a comment |

what if we need to update just some of the variables and we have a lot of variables in url that we are not going to update?

– Ahmed Ali
Apr 7 '17 at 19:02

what if we need to update just some of the variables and we have a lot of variables in url that we are not going to update?

– Ahmed Ali
Apr 7 '17 at 19:02

add a comment |

Another way (independent of jQuery or other libraries): https://github.com/Mikhus/jsurl

var u = new Url;

// or

var u = new Url('/some/path?foo=baz');

alert(u);

u.query.foo = 'bar';

alert(u);

answered Apr 19 '13 at 7:33

Mikhus

1,039118

This library is now called domurl. GitHub is redirecting to the correct repo, just posting here in case that ever changes.

– vaindil
Apr 14 '17 at 14:04

add a comment |

Another way (independent of jQuery or other libraries): https://github.com/Mikhus/jsurl

var u = new Url;

// or

var u = new Url('/some/path?foo=baz');

alert(u);

u.query.foo = 'bar';

alert(u);

answered Apr 19 '13 at 7:33

Mikhus

1,039118

This library is now called domurl. GitHub is redirecting to the correct repo, just posting here in case that ever changes.

– vaindil
Apr 14 '17 at 14:04

add a comment |

Another way (independent of jQuery or other libraries): https://github.com/Mikhus/jsurl

var u = new Url;

// or

var u = new Url('/some/path?foo=baz');

alert(u);

u.query.foo = 'bar';

alert(u);

answered Apr 19 '13 at 7:33

Mikhus

1,039118

Another way (independent of jQuery or other libraries): https://github.com/Mikhus/jsurl

var u = new Url;

// or

var u = new Url('/some/path?foo=baz');

alert(u);

u.query.foo = 'bar';

alert(u);

answered Apr 19 '13 at 7:33

Mikhus

1,039118

answered Apr 19 '13 at 7:33

Mikhus

1,039118

answered Apr 19 '13 at 7:33

Mikhus

1,039118

answered Apr 19 '13 at 7:33

Mikhus

1,039118

This library is now called domurl. GitHub is redirecting to the correct repo, just posting here in case that ever changes.

– vaindil
Apr 14 '17 at 14:04

add a comment |

This library is now called domurl. GitHub is redirecting to the correct repo, just posting here in case that ever changes.

– vaindil
Apr 14 '17 at 14:04

This library is now called domurl. GitHub is redirecting to the correct repo, just posting here in case that ever changes.

– vaindil
Apr 14 '17 at 14:04

add a comment |

//update URL Parameter

function updateURL(key,val){

    var url = window.location.href;

    var reExp = new RegExp("[?|&]"+key + "=[0-9a-zA-Z_+-|.,;]*");



    if(reExp.test(url)) {

        // update

        var reExp = new RegExp("[?&]" + key + "=([^&#]*)");

        var delimiter = reExp.exec(url)[0].charAt(0);

        url = url.replace(reExp, delimiter + key + "=" + val);

    } else {

        // add

        var newParam = key + "=" + val;

        if(!url.indexOf('?')){url += '?';}



        if(url.indexOf('#') > -1){

            var urlparts = url.split('#');

            url = urlparts[0] +  "&" + newParam +  (urlparts[1] ?  "#" +urlparts[1] : '');

        } else {

            url += "&" + newParam;

        }

    }

    window.history.pushState(null, document.title, url);

}

edited May 9 '17 at 19:50

FiSH GRAPHICS

97121024

answered Sep 10 '15 at 13:54

hitchhikers

311

This is a convenient function, but it will not work if the url has no query params from the start, but hash a '#'. You can fix this by changing the indexOf line to (url.indexOf('?') === -1)

– leo
Jan 18 '17 at 18:39

(It will also output ?&key=val, in case of only one url param)

– leo
Jan 18 '17 at 18:39

add a comment |

//update URL Parameter

function updateURL(key,val){

    var url = window.location.href;

    var reExp = new RegExp("[?|&]"+key + "=[0-9a-zA-Z_+-|.,;]*");



    if(reExp.test(url)) {

        // update

        var reExp = new RegExp("[?&]" + key + "=([^&#]*)");

        var delimiter = reExp.exec(url)[0].charAt(0);

        url = url.replace(reExp, delimiter + key + "=" + val);

    } else {

        // add

        var newParam = key + "=" + val;

        if(!url.indexOf('?')){url += '?';}



        if(url.indexOf('#') > -1){

            var urlparts = url.split('#');

            url = urlparts[0] +  "&" + newParam +  (urlparts[1] ?  "#" +urlparts[1] : '');

        } else {

            url += "&" + newParam;

        }

    }

    window.history.pushState(null, document.title, url);

}

edited May 9 '17 at 19:50

FiSH GRAPHICS

97121024

answered Sep 10 '15 at 13:54

hitchhikers

311

This is a convenient function, but it will not work if the url has no query params from the start, but hash a '#'. You can fix this by changing the indexOf line to (url.indexOf('?') === -1)

– leo
Jan 18 '17 at 18:39

(It will also output ?&key=val, in case of only one url param)

– leo
Jan 18 '17 at 18:39

add a comment |

//update URL Parameter

function updateURL(key,val){

    var url = window.location.href;

    var reExp = new RegExp("[?|&]"+key + "=[0-9a-zA-Z_+-|.,;]*");



    if(reExp.test(url)) {

        // update

        var reExp = new RegExp("[?&]" + key + "=([^&#]*)");

        var delimiter = reExp.exec(url)[0].charAt(0);

        url = url.replace(reExp, delimiter + key + "=" + val);

    } else {

        // add

        var newParam = key + "=" + val;

        if(!url.indexOf('?')){url += '?';}



        if(url.indexOf('#') > -1){

            var urlparts = url.split('#');

            url = urlparts[0] +  "&" + newParam +  (urlparts[1] ?  "#" +urlparts[1] : '');

        } else {

            url += "&" + newParam;

        }

    }

    window.history.pushState(null, document.title, url);

}

edited May 9 '17 at 19:50

FiSH GRAPHICS

97121024

answered Sep 10 '15 at 13:54

hitchhikers

311

//update URL Parameter

function updateURL(key,val){

    var url = window.location.href;

    var reExp = new RegExp("[?|&]"+key + "=[0-9a-zA-Z_+-|.,;]*");



    if(reExp.test(url)) {

        // update

        var reExp = new RegExp("[?&]" + key + "=([^&#]*)");

        var delimiter = reExp.exec(url)[0].charAt(0);

        url = url.replace(reExp, delimiter + key + "=" + val);

    } else {

        // add

        var newParam = key + "=" + val;

        if(!url.indexOf('?')){url += '?';}



        if(url.indexOf('#') > -1){

            var urlparts = url.split('#');

            url = urlparts[0] +  "&" + newParam +  (urlparts[1] ?  "#" +urlparts[1] : '');

        } else {

            url += "&" + newParam;

        }

    }

    window.history.pushState(null, document.title, url);

}

edited May 9 '17 at 19:50

FiSH GRAPHICS

97121024

answered Sep 10 '15 at 13:54

hitchhikers

311

edited May 9 '17 at 19:50

FiSH GRAPHICS

97121024

edited May 9 '17 at 19:50

FiSH GRAPHICS

97121024

edited May 9 '17 at 19:50

FiSH GRAPHICS

97121024

answered Sep 10 '15 at 13:54

hitchhikers

311

answered Sep 10 '15 at 13:54

hitchhikers

311

answered Sep 10 '15 at 13:54

hitchhikers

311

This is a convenient function, but it will not work if the url has no query params from the start, but hash a '#'. You can fix this by changing the indexOf line to (url.indexOf('?') === -1)

– leo
Jan 18 '17 at 18:39

(It will also output ?&key=val, in case of only one url param)

– leo
Jan 18 '17 at 18:39

add a comment |

This is a convenient function, but it will not work if the url has no query params from the start, but hash a '#'. You can fix this by changing the indexOf line to (url.indexOf('?') === -1)

– leo
Jan 18 '17 at 18:39

(It will also output ?&key=val, in case of only one url param)

– leo
Jan 18 '17 at 18:39

This is a convenient function, but it will not work if the url has no query params from the start, but hash a '#'. You can fix this by changing the indexOf line to (url.indexOf('?') === -1)

– leo
Jan 18 '17 at 18:39

(It will also output ?&key=val, in case of only one url param)

– leo
Jan 18 '17 at 18:39

add a comment |

Simple solution

You can use URLSearchParams.set() like below:

var currentUrl = 'http://www.example.com/hello.png?w=100&h=100&bg=white';

var url = new URL(currentUrl);

url.searchParams.set("w", "200"); // setting your param

var newUrl = url.href; 

console.log(newUrl);

Online demo (jsfiddle)

answered Jun 27 '18 at 9:50

Ali Soltani

6,3622829

add a comment |

Simple solution

You can use URLSearchParams.set() like below:

var currentUrl = 'http://www.example.com/hello.png?w=100&h=100&bg=white';

var url = new URL(currentUrl);

url.searchParams.set("w", "200"); // setting your param

var newUrl = url.href; 

console.log(newUrl);

Online demo (jsfiddle)

answered Jun 27 '18 at 9:50

Ali Soltani

6,3622829

add a comment |

Simple solution

You can use URLSearchParams.set() like below:

var currentUrl = 'http://www.example.com/hello.png?w=100&h=100&bg=white';

var url = new URL(currentUrl);

url.searchParams.set("w", "200"); // setting your param

var newUrl = url.href; 

console.log(newUrl);

Online demo (jsfiddle)

answered Jun 27 '18 at 9:50

Ali Soltani

6,3622829

Simple solution

You can use URLSearchParams.set() like below:

var currentUrl = 'http://www.example.com/hello.png?w=100&h=100&bg=white';

var url = new URL(currentUrl);

url.searchParams.set("w", "200"); // setting your param

var newUrl = url.href; 

console.log(newUrl);

Online demo (jsfiddle)

answered Jun 27 '18 at 9:50

Ali Soltani

6,3622829

answered Jun 27 '18 at 9:50

Ali Soltani

6,3622829

answered Jun 27 '18 at 9:50

Ali Soltani

6,3622829

answered Jun 27 '18 at 9:50

Ali Soltani

6,3622829

add a comment |

My URL is like this: http://localhost/dentistryindia/admin/hospital/add_procedure?hid=241&hpr_id=12

var reExp = /hpr_id=\d+/;

var url = window.location.href;

url = url.toString(); 

var hrpid = $("#category :selected").val(); //new value to replace hpr_id

var reExp = new RegExp("[\?&]" + 'hpr_id' + "=([^&#]*)"),

delimeter = reExp.exec(url)[0].charAt(0),

newUrl = url.replace(reExp, delimeter + 'hpr_id' + "=" + hrpid);

window.location.href = newUrl;

This is how it worked for me.

answered Jul 2 '15 at 8:51

chandoo

68511120

add a comment |

My URL is like this: http://localhost/dentistryindia/admin/hospital/add_procedure?hid=241&hpr_id=12

var reExp = /hpr_id=\d+/;

var url = window.location.href;

url = url.toString(); 

var hrpid = $("#category :selected").val(); //new value to replace hpr_id

var reExp = new RegExp("[\?&]" + 'hpr_id' + "=([^&#]*)"),

delimeter = reExp.exec(url)[0].charAt(0),

newUrl = url.replace(reExp, delimeter + 'hpr_id' + "=" + hrpid);

window.location.href = newUrl;

This is how it worked for me.

answered Jul 2 '15 at 8:51

chandoo

68511120

add a comment |

My URL is like this: http://localhost/dentistryindia/admin/hospital/add_procedure?hid=241&hpr_id=12

var reExp = /hpr_id=\d+/;

var url = window.location.href;

url = url.toString(); 

var hrpid = $("#category :selected").val(); //new value to replace hpr_id

var reExp = new RegExp("[\?&]" + 'hpr_id' + "=([^&#]*)"),

delimeter = reExp.exec(url)[0].charAt(0),

newUrl = url.replace(reExp, delimeter + 'hpr_id' + "=" + hrpid);

window.location.href = newUrl;

This is how it worked for me.

answered Jul 2 '15 at 8:51

chandoo

68511120

My URL is like this: http://localhost/dentistryindia/admin/hospital/add_procedure?hid=241&hpr_id=12

var reExp = /hpr_id=\d+/;

var url = window.location.href;

url = url.toString(); 

var hrpid = $("#category :selected").val(); //new value to replace hpr_id

var reExp = new RegExp("[\?&]" + 'hpr_id' + "=([^&#]*)"),

delimeter = reExp.exec(url)[0].charAt(0),

newUrl = url.replace(reExp, delimeter + 'hpr_id' + "=" + hrpid);

window.location.href = newUrl;

This is how it worked for me.

answered Jul 2 '15 at 8:51

chandoo

68511120

answered Jul 2 '15 at 8:51

chandoo

68511120

answered Jul 2 '15 at 8:51

chandoo

68511120

answered Jul 2 '15 at 8:51

chandoo

68511120

add a comment |

Another way you you can do this, using some simple reg ex code by Samuel Santos here like this:

/*

 * queryParameters -> handles the query string parameters

 * queryString -> the query string without the fist '?' character

 * re -> the regular expression

 * m -> holds the string matching the regular expression

 */

var queryParameters = {}, queryString = location.search.substring(1),

        re = /([^&=]+)=([^&]*)/g, m;



// Creates a map with the query string parameters

while (m = re.exec(queryString)) {

    queryParameters[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);

}



// Update w and h

queryParameters['w'] = 200;

queryParameters['h'] = 200;

Now you can either create a new URL:

var url = window.location.protocol + '//' + window.location.hostname + window.location.pathname;



// Build new Query String

var params = $.param(queryParameters);

if (params != '') {

    url = url + '?' + params;

}

OR you could just use the params to cause browser to reload right away:

location.search = params;

OR do whatever you want with :)

edited Nov 27 '15 at 21:33

answered Nov 27 '15 at 21:27

PanPipes

3,89611020

add a comment |

Another way you you can do this, using some simple reg ex code by Samuel Santos here like this:

/*

 * queryParameters -> handles the query string parameters

 * queryString -> the query string without the fist '?' character

 * re -> the regular expression

 * m -> holds the string matching the regular expression

 */

var queryParameters = {}, queryString = location.search.substring(1),

        re = /([^&=]+)=([^&]*)/g, m;



// Creates a map with the query string parameters

while (m = re.exec(queryString)) {

    queryParameters[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);

}



// Update w and h

queryParameters['w'] = 200;

queryParameters['h'] = 200;

Now you can either create a new URL:

var url = window.location.protocol + '//' + window.location.hostname + window.location.pathname;



// Build new Query String

var params = $.param(queryParameters);

if (params != '') {

    url = url + '?' + params;

}

OR you could just use the params to cause browser to reload right away:

location.search = params;

OR do whatever you want with :)

edited Nov 27 '15 at 21:33

answered Nov 27 '15 at 21:27

PanPipes

3,89611020

add a comment |

Another way you you can do this, using some simple reg ex code by Samuel Santos here like this:

/*

 * queryParameters -> handles the query string parameters

 * queryString -> the query string without the fist '?' character

 * re -> the regular expression

 * m -> holds the string matching the regular expression

 */

var queryParameters = {}, queryString = location.search.substring(1),

        re = /([^&=]+)=([^&]*)/g, m;



// Creates a map with the query string parameters

while (m = re.exec(queryString)) {

    queryParameters[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);

}



// Update w and h

queryParameters['w'] = 200;

queryParameters['h'] = 200;

Now you can either create a new URL:

var url = window.location.protocol + '//' + window.location.hostname + window.location.pathname;



// Build new Query String

var params = $.param(queryParameters);

if (params != '') {

    url = url + '?' + params;

}

OR you could just use the params to cause browser to reload right away:

location.search = params;

OR do whatever you want with :)

edited Nov 27 '15 at 21:33

answered Nov 27 '15 at 21:27

PanPipes

3,89611020

Another way you you can do this, using some simple reg ex code by Samuel Santos here like this:

/*

 * queryParameters -> handles the query string parameters

 * queryString -> the query string without the fist '?' character

 * re -> the regular expression

 * m -> holds the string matching the regular expression

 */

var queryParameters = {}, queryString = location.search.substring(1),

        re = /([^&=]+)=([^&]*)/g, m;



// Creates a map with the query string parameters

while (m = re.exec(queryString)) {

    queryParameters[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);

}



// Update w and h

queryParameters['w'] = 200;

queryParameters['h'] = 200;

Now you can either create a new URL:

var url = window.location.protocol + '//' + window.location.hostname + window.location.pathname;



// Build new Query String

var params = $.param(queryParameters);

if (params != '') {

    url = url + '?' + params;

}

OR you could just use the params to cause browser to reload right away:

location.search = params;

OR do whatever you want with :)

edited Nov 27 '15 at 21:33

answered Nov 27 '15 at 21:27

PanPipes

3,89611020

edited Nov 27 '15 at 21:33

answered Nov 27 '15 at 21:27

PanPipes

3,89611020

answered Nov 27 '15 at 21:27

PanPipes

3,89611020

answered Nov 27 '15 at 21:27

PanPipes

3,89611020

add a comment |

You could do something like this:

// If key exists updates the value

if (location.href.indexOf('key=') > -1) {

    location.href = location.href.replace('key=current_val', 'key=new_val');



// If not, append

} else {

     location.href = location.href + '&key=new_val';

}

Regards

answered May 27 '16 at 3:38

Nicolas Finelli

2,0261106

add a comment |

You could do something like this:

// If key exists updates the value

if (location.href.indexOf('key=') > -1) {

    location.href = location.href.replace('key=current_val', 'key=new_val');



// If not, append

} else {

     location.href = location.href + '&key=new_val';

}

Regards

answered May 27 '16 at 3:38

Nicolas Finelli

2,0261106

add a comment |

You could do something like this:

// If key exists updates the value

if (location.href.indexOf('key=') > -1) {

    location.href = location.href.replace('key=current_val', 'key=new_val');



// If not, append

} else {

     location.href = location.href + '&key=new_val';

}

Regards

answered May 27 '16 at 3:38

Nicolas Finelli

2,0261106

You could do something like this:

// If key exists updates the value

if (location.href.indexOf('key=') > -1) {

    location.href = location.href.replace('key=current_val', 'key=new_val');



// If not, append

} else {

     location.href = location.href + '&key=new_val';

}

Regards

answered May 27 '16 at 3:38

Nicolas Finelli

2,0261106

answered May 27 '16 at 3:38

Nicolas Finelli

2,0261106

answered May 27 '16 at 3:38

Nicolas Finelli

2,0261106

answered May 27 '16 at 3:38

Nicolas Finelli

2,0261106

add a comment |

I like Ali's answer the best. I cleaned up the code into a function and thought I would share it to make someone else's life easier. Hope this helps someone.

function addParam(currentUrl,key,val) {

    var url = new URL(currentUrl);

    url.searchParams.set(key, val);

    return url.href; 

}

answered Nov 20 '18 at 3:15

user1254723

646

add a comment |

I like Ali's answer the best. I cleaned up the code into a function and thought I would share it to make someone else's life easier. Hope this helps someone.

function addParam(currentUrl,key,val) {

    var url = new URL(currentUrl);

    url.searchParams.set(key, val);

    return url.href; 

}

answered Nov 20 '18 at 3:15

user1254723

646

add a comment |

I like Ali's answer the best. I cleaned up the code into a function and thought I would share it to make someone else's life easier. Hope this helps someone.

function addParam(currentUrl,key,val) {

    var url = new URL(currentUrl);

    url.searchParams.set(key, val);

    return url.href; 

}

answered Nov 20 '18 at 3:15

user1254723

646

I like Ali's answer the best. I cleaned up the code into a function and thought I would share it to make someone else's life easier. Hope this helps someone.

function addParam(currentUrl,key,val) {

    var url = new URL(currentUrl);

    url.searchParams.set(key, val);

    return url.href; 

}

answered Nov 20 '18 at 3:15

user1254723

646

answered Nov 20 '18 at 3:15

user1254723

646

answered Nov 20 '18 at 3:15

user1254723

646

answered Nov 20 '18 at 3:15

user1254723

646

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu