Change URL parameters Change URL parameters javascript javascript

Change URL parameters


I've extended Sujoy's code to make up a function.

/** * http://stackoverflow.com/a/10997390/11236 */function updateURLParameter(url, param, paramVal){    var newAdditionalURL = "";    var tempArray = url.split("?");    var baseURL = tempArray[0];    var additionalURL = tempArray[1];    var temp = "";    if (additionalURL) {        tempArray = additionalURL.split("&");        for (var i=0; i<tempArray.length; i++){            if(tempArray[i].split('=')[0] != param){                newAdditionalURL += temp + tempArray[i];                temp = "&";            }        }    }    var rows_txt = temp + "" + param + "=" + paramVal;    return baseURL + "?" + newAdditionalURL + rows_txt;}

Function Calls:

var newURL = updateURLParameter(window.location.href, 'locId', 'newLoc');newURL = updateURLParameter(newURL, 'resId', 'newResId');window.history.replaceState('', '', updateURLParameter(window.location.href, "param", "value"));

Updated version that also take care of the anchors on the URL.

function updateURLParameter(url, param, paramVal){    var TheAnchor = null;    var newAdditionalURL = "";    var tempArray = url.split("?");    var baseURL = tempArray[0];    var additionalURL = tempArray[1];    var temp = "";    if (additionalURL)     {        var tmpAnchor = additionalURL.split("#");        var TheParams = tmpAnchor[0];            TheAnchor = tmpAnchor[1];        if(TheAnchor)            additionalURL = TheParams;        tempArray = additionalURL.split("&");        for (var i=0; i<tempArray.length; i++)        {            if(tempArray[i].split('=')[0] != param)            {                newAdditionalURL += temp + tempArray[i];                temp = "&";            }        }            }    else    {        var tmpAnchor = baseURL.split("#");        var TheParams = tmpAnchor[0];            TheAnchor  = tmpAnchor[1];        if(TheParams)            baseURL = TheParams;    }    if(TheAnchor)        paramVal += "#" + TheAnchor;    var rows_txt = temp + "" + param + "=" + paramVal;    return baseURL + "?" + newAdditionalURL + rows_txt;}


I think you want the query plugin.

E.g.:

window.location.search = jQuery.query.set("rows", 10);

This will work regardless of the current state of rows.


To answer my own question 4 years later, after having learned a lot. Especially that you shouldn't use jQuery for everything. I've created a simple module that can parse/stringify a query string. This makes it easy to modify the query string.

You can use query-string as follows:

// parse the query string into an objectvar q = queryString.parse(location.search);// set the `row` propertyq.rows = 10;// convert the object to a query string// and overwrite the existing query stringlocation.search = queryString.stringify(q);