Javascript Reload page with change in param values when params are in no particular order

Question

I need to reload the page location after updating the param values, it wouldn't have been difficult if the params were always in a particular order, but they are not.

So if there was a set pattern, I could target them via regex match, so for example for a URL: http://www.example.html?sf_id=15040&15041.survey=form&variation=25002_1

I was targeting it like this:

window.location.replace( window.location.href.replace( sf_id=\d+&\d+\.survey=form&variation=, 'sf_id=460&460.survey=form&variation=25002_2' ) );

But now the param occurence is random, so these are all valid URLs:

http://www.example.html?15041.survey=form&sf_id=15040&variation=25002_1
http://www.example.html?variation=25002_1&sf_id=15040&15041.survey=form
http://www.example.html?param1=value1&variation=25002_1&sf_id=15040&param2=value2&15041.survey=form

I know I can still right if/else if statements, but I don't think thats the right way, since there is no specif pattern.

Any help is appreciated! Thank you.

Answer 1

Based on this SO answer, I would use the following code to fetch an array of all the query params:

var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i)
    {
        var p=a[i].split('=', 2);
        if (p.length == 1)
            b[p[0]] = "";
        else
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return b;
})(window.location.search.substr(1).split('&'));

Update
The function above returns an associative array, so you cannot use .join() as I previously answered. Instead you have to loop through the keys and reconstruct your new query string. I've also included a function to replace a parameter key -- you might be overthinking that part.

function replaceParamKey(qsObj, oldKey, newKey) {
    qsObj[newKey] = qsObj[oldKey];
    delete qsObj[oldKey];
}

function constructQueryString(qsObj) {
    var qsString = "?",
        c = 0;
    for (var param in qsObj) {
        if (c) qsString += "&";
        qsString += encodeURIComponent(param);
        if (qsObj[param] !== "") qsString += ("=" + encodeURIComponent(qsObj[param]));
        c++;
    }

    return qsString;
}

console.info(qs); // Object {15041.survey: "form", sf_id: 15040, variation: "25002_1"}
replaceParamKey(qs, "15041.survey", "460.survey");
console.info(constructQueryString(qs)); // ?sf_id=15040&variation=25002_1&460.survey=form

Answer 2

See if this answer will lead you to the track. After that you can do various object-to-object comparisons to check if they are a match.