How can I add or update a query string parameter?

I wrote the following function which accomplishes what I want to achieve:

function updateQueryStringParameter(uri, key, value) {  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");  var separator = uri.indexOf('?') !== -1 ? "&" : "?";  if (uri.match(re)) {    return uri.replace(re, '$1' + key + "=" + value + '$2');  }  else {    return uri + separator + key + "=" + value;  }}

Update (2020): URLSearchParams is now supported by all modern browsers.

The URLSearchParams utility can be useful for this in combination with window.location.search. For example:

if ('URLSearchParams' in window) {    var searchParams = new URLSearchParams(window.location.search);    searchParams.set("foo", "bar");    window.location.search = searchParams.toString();}

Now foo has been set to bar regardless of whether or not it already existed.

However, the above assignment to window.location.search will cause a page load, so if that's not desirable use the History API as follows:

if ('URLSearchParams' in window) {    var searchParams = new URLSearchParams(window.location.search)    searchParams.set("foo", "bar");    var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();    history.pushState(null, '', newRelativePathQuery);}

Now you don't need to write your own regex or logic to handle the possible existence of query strings.

However, browser support is poor as it's currently experimental and only in use in recent versions of Chrome, Firefox, Safari, iOS Safari, Android Browser, Android Chrome and Opera. Use with a polyfill if you do decide to use it.

I have expanded the solution and combined it with another that I found to replace/update/remove the querystring parameters based on the users input and taking the urls anchor into consideration.

Not supplying a value will remove the parameter, supplying one will add/update the parameter. If no URL is supplied, it will be grabbed from window.location

function UpdateQueryString(key, value, url) {    if (!url) url = window.location.href;    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),        hash;    if (re.test(url)) {        if (typeof value !== 'undefined' && value !== null) {            return url.replace(re, '$1' + key + "=" + value + '$2$3');        }         else {            hash = url.split('#');            url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');            if (typeof hash[1] !== 'undefined' && hash[1] !== null) {                url += '#' + hash[1];            }            return url;        }    }    else {        if (typeof value !== 'undefined' && value !== null) {            var separator = url.indexOf('?') !== -1 ? '&' : '?';            hash = url.split('#');            url = hash[0] + separator + key + '=' + value;            if (typeof hash[1] !== 'undefined' && hash[1] !== null) {                url += '#' + hash[1];            }            return url;        }        else {            return url;        }    }}

Update

There was a bug when removing the first parameter in the querystring, I have reworked the regex and test to include a fix.

Second Update

As suggested by @JarónBarends - Tweak value check to check against undefined and null to allow setting 0 values

Third Update

There was a bug where removing a querystring variable directly before a hashtag would lose the hashtag symbol which has been fixed

Fourth Update

Thanks @rooby for pointing out a regex optimization in the first RegExp object.Set initial regex to ([?&]) due to issue with using (\?|&) found by @YonatanKarni

Fifth Update

Removing declaring hash var in if/else statement