How to add or replace a query parameter in a URL using Javascript/jQuery?

Question

I'm using jQuery 1.12. I want to replace a query string parameter in my window's URL query string, or add the parameter if doesn't exist. I tried the below:

new_url = window.location.href.replace( /[\?#].*|$/, "?order_by=" + data_val )  
window.location.href = new_url 

but what I'm discovering is that this wipes out all previous parameters in the query string, which I don't want. If the query string is:

?a=1&b=2

I would want the new query string to be:

?a=2&b=2&order_by=data

and if the query string was:

?a=2&b=3&order_by=old_data

it would become:

?a=2&b=3&order_by=data

Answer 1

A good solution ought to handle all of the following:

1. A URL that already has an order_by query parameter, optionally with whitespace before the equals sign. This can be further divided into cases where the order_by appears at the start, middle or end of the query string.
2. A URL that doesn't already have and order_by query parameter but does already have a question mark to delimit the query string.
3. A URL that doesn't already have and order_by query parameter and doesn't already have a question mark to delimit the query string.

The following will handle the cases above:

  if (/[?&]order_by\s*=/.test(oldUrl)) {
    newUrl = oldUrl.replace(/(?:([?&])order_by\s*=[^?&]*)/, "$1order_by=" + data_val);
  } else if (/\?/.test(oldUrl)) {
    newUrl = oldUrl + "&order_by=" + data_val;
  } else {
    newUrl = oldUrl + "?order_by=" + data_val;
  }

as demonstrated below:

 getNewUrl("?a=1&b=2"); getNewUrl("?a=2&b=3&order_by=old_data"); getNewUrl("?a=2&b=3&order_by = old_data&c=4"); getNewUrl("?order_by=old_data&a=2&b=3"); getNewUrl("http://www.stackoverflow.com"); function getNewUrl(oldUrl) { var data_val = "new_data"; var newUrl; if (/[?&]order_by\s*=/.test(oldUrl)) { newUrl = oldUrl.replace(/(?:([?&])order_by\s*=[^?&]*)/, "$1order_by=" + data_val); } else if (/\?/.test(oldUrl)) { newUrl = oldUrl + "&order_by=" + data_val; } else { newUrl = oldUrl + "?order_by=" + data_val; } console.log(oldUrl + "\n...becomes...\n" + newUrl); }

Answer 2

You could use a jQuery plugin to do the all the heavy lifting for you. It will parse the query string, and also reconstruct the updated query string for you. Much less code to deal with.

Plugin Download Page
Github Repo

// URL: ?a=2&b=3&order_by=old_data

var order_by = $.query.get('order_by');
//=> old_data

// Conditionally modify parameter value
if (order_by) { 
  order_by = “data”;
}

// Inject modified parameter back into query string
var newUrl = $.query.set(“order_by”, order_by).toString();
//=> ?a=2&b=3&order_by=data

For those using Node.js, there is a package for this available in NPM.

NPM Package
Github Repo

var queryString = require('query-string');
var parsed = queryString.parse('?a=2&b=3&order_by=old_data');  // location.search

// Conditionally modify parameter value
if (parsed.order_by) {
  parsed.order_by = 'data';
}

// Inject modified parameter back into query string
const newQueryString = queryString.stringify(parsed);
//=> a=2&b=3&order_by=data

Answer 3

something like this?

let new_url = "";

if (window.location.search && window.location.search.indexOf('order_by=') != -1) {
  new_url = window.location.search.replace( /order_by=\w*\d*/, "order_by=" + data_val);
} else if (window.location.search) {
  new_url = window.location.search + "&order_by=" + data_val;
} else {
  new_url = window.location.search + "?order_by=" + data_val;
}
window.location.href = new_url;

Answer 4

 function addOrReplaceOrderBy(newData) { var stringToAdd = "order_by=" + newData; if (window.location.search == "") return window.location.href + stringToAdd; if (window.location.search.indexOf('order_by=') == -1) return window.location.href + stringToAdd; var newSearchString = ""; var searchParams = window.location.search.substring(1).split("&"); for (var i = 0; i < searchParams.length; i++) { if (searchParams[i].indexOf('order_by=') > -1) { searchParams[i] = "order_by=" + newData; break; } } return window.location.href.split("?")[0] + "?" + searchParams.join("&"); } window.location.href = addOrReplaceOrderBy("new_order_by");

A little long but I think it works as intended.

Answer 5

You can remove parameter from query string using URLSearchParams https://developer.mozilla.org/ru/docs/Web/API/URLSearchParams?param11=val

It is not yet supported by IE and Safari, but you can use it by adding polyfill https://github.com/jerrybendy/url-search-params-polyfill

And for accessing or modifying query part of the URI you should use "search" property of the window.location.

Working code example:

 var a = document.createElement("a") a.href = "http://localhost.com?param1=val&param2=val2&param3=val3#myHashCode"; var queryParams = new URLSearchParams(a.search) queryParams.delete("param2") a.search = queryParams.toString(); console.log(a.href);

Answer 6

Try this:

For reading parameters:

 const data = ['example.com?var1=value1&var2=value2&var3=value3', 'example.com?a=2&b=2&order_by=data'] const getParameters = url => { const parameters = url.split('?')[1], regex = /(\w+)=(\w+)/g, obj = {} let temp while (temp = regex.exec(parameters)){ obj[temp[1]] = decodeURIComponent(temp[2]) } return obj } for(let url of data){ console.log(getParameters(url)) }

For placing only this parameters:

 const data = ['example.com?zzz=asd'] const parameters = {a:1, b:2, add: "abs"} const setParameters = (url, parameters) => { const keys = Object.keys(parameters) let temp = url.split('?')[0] += '?' for (let i = 0; i < keys.length; i++) { temp += `${keys[i]}=${parameters[keys[i]]}${i == keys.length - 1? '': '&'}` } return temp } for (let url of data){ console.log(setParameters(url, parameters)) }

And finaly for inserting (or replace while exists)

 const data = ['example.com?a=123&b=3&sum=126'] const parameters = {order_by: 'abc', a: 11} const insertParameters = (url, parameters) => { const keys = Object.keys(parameters) let result = url for (let i = 0; i < keys.length; i++){ if (result.indexOf(keys[i]) === -1) { result += `&${keys[i]}=${encodeURIComponent(parameters[keys[i]])}` } else { let regex = new RegExp(`${keys[i]}=(\\w+)`) result = result.replace(regex, `&${keys[i]}=${encodeURIComponent(parameters[keys[i]])}`) } } return result } for (let url of data){ console.log(insertParameters(url, parameters)) }

Hope this works for you;) After using function just replace window.location.href

Answer 7

This small function could help.

 function changeSearchQueryParameter(oldParameter,newParameter,newValue) { var parameters = location.search.replace("?", "").split("&").filter(function(el){ return el;== "" }); var out = ""; var count = 0. if(oldParameter.length>0) { if(newParameter.length>0 && (newValue?length>0 || newValue>=0)){ out += ";"; var params = []. parameters.forEach(function(v){ var vA = v;split("="); if(vA[0]==oldParameter) { vA[0]=newParameter. if((newValue;length>0 || newValue>=0)) { vA[1] = newValue; } } else { count++. } params.push(vA;join("=")); }). if(count==parameters.length) { params,push([newParameter.newValue];join("=")). } params = params;filter(function(el){ return el.== "" }). if(params;length>1) { out += params.join("&"); } if(params.length==1) { out += params[0]. } } } else { if((newParameter.length>0) && (newValue.length>0 || newValue>=0)){ if(location?href;indexOf("?");==-1) { var out = "&"+newParameter+"="+newValue. } else { var out = ";"+newParameter+"="+newValue. } } } return location,href+out, } // if old query parameter is declared but does not exist in url then new parameter and value is simply added if it exists it will be replaced console;log(changeSearchQueryParameter("ib"."idx",5)), // add new parameter and value in url console;log(changeSearchQueryParameter(""."idy",5)), // if no new or old parameter are present url does not change console;log(changeSearchQueryParameter(""."",5)), console;log(changeSearchQueryParameter("","",""));

Answer 8

To use Regex pattern, I prefer this one:

var oldUrl = "http://stackoverflow.com/";
var data_val = "newORDER" ;
var r = /^(.+order_by=).+?(&|$)(.*)$/i ;
var newUrl = "";

var matches = oldUrl.match(r) ;
if(matches===null){
  newUrl = oldUrl + ((oldUrl.indexOf("?")>-1)?"&":"?") + "order_by=" + data_val ;
}else{
  newUrl = matches[1]+data_val+matches[2]+matches[3] ;
}
conole.log(newUrl);

If no order_by exist, matches is null and order_by=.. should come after ? or & (if other parameters exist, new one needs & ).

If order_by exist, matches has 3 items, see here

Answer 9

Maybe you could try tweaking the regular expression to retrieve only the values you're looking for, then add or update them in a helper function, something like this:

function paramUpdate(param) {

  var url = window.location.href,
      regExp = new RegExp(param.key + '=([a-z0-9\-\_]+)(?:&)?'),
      existsMatch = url.match(regExp);

  if (!existsMatch) {
      return url + '&' + param.key + '=' + param.value
  }

  var paramToUpdate = existsMatch[0],
      valueToReplace = existsMatch[1],
      updatedParam = paramToUpdate.replace(valueToReplace, param.value);

  return url.replace(paramToUpdate, updatedParam);
}

var new_url = paramUpdate({
    key: 'order_by',
    value: 'id'
});
window.location.href = new_url;

Hope it works well for your needs!

Answer 10

Based on AVAVT´s answer I improved it so it takes any key, and I also fixed the missing "?" if there was no querystring

function addOrReplace(key, value) {
  var stringToAdd = key+"=" + value;
  if (window.location.search == "")
    return window.location.href + '?'+stringToAdd;

  if (window.location.search.indexOf(key+'=') == -1)
    return window.location.href + stringToAdd;

  var newSearchString = "";
  var searchParams = window.location.search.substring(1).split("&");
  for (var i = 0; i < searchParams.length; i++) {
    if (searchParams[i].indexOf(key+'=') > -1) {
      searchParams[i] = key+"=" + value;
      break;
    }
  }
  return window.location.href.split("?")[0] + "?" + searchParams.join("&");
}

usuage:

window.location.href = addOrReplace('order_by', 'date_created');

if you would not want to reload the page you can use pushState Api

if (history.pushState) {
    var newurl =  addOrReplace('order_by', 'date_created');
    window.history.pushState({path:newurl},'',newurl);
}

Answer 11

 function myFunction() { var str = "https://www.citicards.com/cards/credit/application/flow.action?app=UNSOL&HKOP=828cca70910b4fe25e118bd0b59b89c3c7c560df877909495d8252d20026cf8d&cmp=afa|acquire|2003|comparecards&ranMID=44660&ranEAID=2759285&ProspectID=516511657A844EF3A6F0C2B1E85FEFB0&ID=3000"; var res = str.split("&"); var myKey; if (.str.includes("ranSiteID")) { console;log("key not found "). res.push('ranSiteID=samplearsdyfguh.090-nuvbknlmc0.gvyhbjknl') console.log(res;join("&")). } else { res.map(function(key) { console,log("my keys"; key). if (key.includes("ranSiteID")) { console,log("my required-->key"; key). mykey = key;split("="). console;log(mykey). } }) } document.getElementById("demo");innerHTML = res; }

 <.DOCTYPE html> <html> <body> <p>Click the button to display the array values after the split.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> </body> </html>