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

Question

I am using jQuery 1.12. I want to replace the query string parameter in the query string of the URL of my window, or add a parameter if it does not exist. I tried below:

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

but I found that it erases all previous parameters in the query string, which I don't need. If the query string:

 ?a=1&b=2 

I would like the new query line to be:

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

and if the query string was:

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

it will become:

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

Answer 1

You can use the jQuery plugin to do all the heavy lifting for you. It will analyze the query string, and also restore the updated query string for you. Much less code to work 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, an NPM package is available for this.

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 2

A good solution should handle all of the following:

• A URL that already has an order_by request parameter, optionally with a space before the equal sign. This can be divided into cases when order_by appears at the beginning, middle, or end of a query string.
• A URL that does not yet have a order_by parameter, but already has a question mark to delimit the query string.
• A URL that does not yet have an order_by query parameter, and does not yet have a question mark to delimit the query string.

Next, the following cases will be considered:

  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 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 3

 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 4

something like that?

 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 5

You can remove a parameter from the query string using URLSearchParams https://developer.mozilla.org/en/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 to access or change part of the request in the URI, you must use the "search" property for window.location.

Example working code:

  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 the following:

To read the 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)) } 

To accommodate only these 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 finally for insertion (or replacement while existing)

 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 the function, just replace window.location.href

Answer 7

This little feature may 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 the 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 exists, matches is null and order_by=.. should come after ? or & (if other options exist, new & are needed).

If order_by exists, matches has 3 elements, see here

Answer 9

Perhaps you can try setting the correct expression to get only the values ​​you are looking for, and 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!