Add or update query string parameter - URL remains unchanged

Question

I am using this block of code to manage query string parameters :

function UpdateQueryString(key, value, url) {
    if (!url) url = window.location.href;
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi");

    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null)
            return url.replace(re, '$1' + key + "=" + value + '$2$3');
        else {
            var 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;
    }
}

Function source : add or update query string parameter

I am calling the function, everything runs fine but the url on my browser is not changed. I used also Chrome console to check if the function was correctly called and the function is ok and retuns the expected value but the url remains unchanged.

Thanks for your help

score 2 · Accepted Answer · answered Feb 14 '14 at 16:17

2

This function is not changing the url. It's simply returning a string.

If you wanna change the url (reloading the page) you should write something like this:

window.location.href = UpdateQueryString(your_key, your_value, your_url)

If you wanna change the url without reloading the entire page, using the HTML5 History/State APIs, you might be interested in this:

https://github.com/browserstate/history.js/

answered Feb 14 '14 at 16:17

Stefano Ortisi

5,094
2
26
39

Exactly. That's what I need and without reloading the page as you stated. Thanks – user2779312 Feb 14 '14 at 16:20

Mehran Hatami · Answer 2 · 2014-02-14T16:21:12.687

the point is this function doesn't change the url, you should do it by yourself like:

 window.location.href = UpdateQueryString("yourkey","newvalue");

or change it like:

function UpdateQueryString(key, value, url) {
    //this flag is to check if you want to change the current page url
    var iscurrentpage = false;
    if (!url){
        url = window.location.href;
        iscurrentpage = true;
    }
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi");

    //this variable would be used as the result for this function
    var result = null;

    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null) result = url.replace(re, '$1' + key + "=" + value + '$2$3');
        else {
            var hash = url.split('#');
            url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) url += '#' + hash[1];
            result = 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];
            result = url;
        } else result = url;
    }
    //if this is current page update the current page url
    if(iscurrentpage) window.location.href = result;
    return result;
}

then call it without the url parameter, just with 2 parameter:

UpdateQueryString("yourkey", "newvalue");

Add or update query string parameter - URL remains unchanged

2 Answers2