We Keep Coding

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

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

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

A good solution ought to handle all of the following:
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.
A URL that doesn't already have and order_by query parameter but does already have a question mark to delimit the query string.
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);
}

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;

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.

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);

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

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("","",""));

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!

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

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);
}

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>

Rebuild a url with the query parameters

I have a url:
http://www.example.com/gclid/YH67/utm/2908321/id/test
I would like to have the url with query parameters:
http://www.example.com/?gclid=YH67&utm=2908321&id=test
What I know is the main url http://www.example.com/
I would like to make the url to have the right parameter (I don't know the specific parameters of key/value).
Here is a simple example that I saw it works
if (window.location.href === "http://www.example.com") {
url = "http://www.example.com?gclid=test";
window.history.pushState("", "", url);
}

try this one -
function makeURL(url)
{
var mainUrl = "http://www.example.com/";
var urlArr = url.split(mainUrl);
if(urlArr[1] && urlArr[1] !== "")
{
// assuming url will always be a perfect url
var queryPoints = urlArr[1].split("/");
var queryStr = "?";
for(var i = 0; i < queryPoints.length; i+=2)
{
var key = queryPoints[i];
var value = queryPoints[i+1];
if(i+2 == queryPoints.length)
queryStr += key+ "=" + value;
else
queryStr += key+ "=" + value + "&";
}
var queriedUrl = mainUrl + queryStr;
console.log(queriedUrl);
return queriedUrl;
}
return url;
}
Invoke above function like this - makeURL("http://www.example.com/gclid/YH67/utm/2908321/id/test"). It will return you the data in query string format.

Here is an update that transform a given url to a url with query string:
var url='http://www.example.com/gclid/YH67/utm/2908321/id/test';
var domain='http://www.example.com/';
function extractParams(url,domain) {
var params=url.replace(domain,'').split('/');
var newparams={};
for (var i=0;i<params.length;i=i+2) {
newparams[params[i]]=params[i+1];
}
return newparams;
}
function httpBuildQuery(params) {
var query=[];
for (var key in params) {
query.push(key+'='+params[key]);
}
return query.join('&');
}
console.log(httpBuildQuery(extractParams(url,domain)));

Strip duplicate parameters from the url

I am trying to strip duplicate query string parameters from the url. What am I doing wrong?
function stripUrlParams(url, parameter) {
//prefer to use l.search if you have a location/link object
var urlparts= url.split('?');
if (urlparts.length>=2) {
var prefix= encodeURIComponent(parameter)+'=';
var pars= urlparts[1].split(/[&;]/g);
//reverse iteration as may be destructive
for (var i= pars.length; i-- > 0;) {
//idiom for string.startsWith
if (pars[i].lastIndexOf(prefix, 0) !== -1) {
pars.splice(i, 1);
}
}
url = urlparts[0] + '?' + pars.join('&');
return url;
} else {
return url;
}
}
stripUrlParams('www.testurl.com?x=1&y=2&x=2');
//Should return "www.testurl.com?x=1&y=2".
http://jsfiddle.net/marcusdei/LnzsoLot/1/

Try this:
function stripUrlParams(url, parameter) {
//prefer to use l.search if you have a location/link object
var urlparts= url.split('?');
if (urlparts.length>=2) {
var stuff = urlparts[1];
pars = stuff.split("&");
var comps = {};
for (i = pars.length - 1; i >= 0; i--)
{
spl = pars[i].split("=");
comps[spl[0]] = spl[1];
}
pars = [];
for (var a in comps)
pars.push(a + "=" + comps[a]);
url = urlparts[0] + '?' + pars.join('&');
return url;
} else {
return url;
}
}
document.getElementById('choice').innerHTML = stripUrlParams('www.testurl.com?x=1&y=2&x=2');
//Should return "www.testurl.com?x=1&y=2".
Fiddle: http://jsfiddle.net/praveenscience/n8497sqL/

In your var var prefix= encodeURIComponent(parameter)+'=';, parameter is undefined.
Try to provide a value for it, and this will probably solve your issue by adding your 2nd param in your function call:
stripUrlParams('www.testurl.com?x=1&y=2&x=2', '');

The problem is: Your function does not remove duplicate URL arguments, it simply removes the parameter you pass to the method when you call it.
For example calling
stripUrlParams('www.testurl.com?x=1&y=2&x=2', 'x');
will strip all x parameters from the URL. You'll have to keep track of parameters that are in your URL already and remove them (or not copy them over), when you come across them a second time. Possible solutions have been provided in other answers already.

The above solution from #Praveen Kumar is good but its will not correctly handle if the multi-selection values or arrays are passed.
So I'm writing here a function with little changes the function is to be used with URI instead of full URL, just pass this part to this function x=1&y=2.
function stripUriParams(uri) {
var stuff = decodeURIComponent(uri);
var pars = stuff.split("&");
var finalPars = [];
var comps = {};
for (var i = pars.length - 1; i >= 0; i--)
{
spl = pars[i].split("=");
//ignore arrays
if(!spl[0].endsWith(']')) {
comps[spl[0]] = spl[1];
} else {
//this is array so enter it into final url array
finalPars.push(spl[0] + "=" + spl[1]);
}
}
for (var a in comps)
finalPars.push(a + "=" + comps[a]);
url = finalPars.join('&');
return url;
}
Input:
stripUriParams('pr1=2&pr1=3&pr2=1&arr[]=1&arr[]=2');
Output:
pr1=2&pr2=1&arr[]=1&arr[]=2
Whereas the output of Parveen's function would be something like
pr1=2&pr2=1&arr[]=1
PS) Why I didn't edit the above answer because I modified it for URIs instead of full URL.

how to check whether NAN is present in json string or not

suppose i have below function, which is getting jsonData in the form of jason, i validate the var jsonData to check for NaN ?
function save() {
var jsonData = getEnteredValue();
$.ajax({
type : 'POST',
url : 'saveSalesForecast.json',
data : 'jsonPostData=' + jsonData,
success : function() { //alert("success");
}
});
}
i only know how to replace NAN but don know how to check for NAN!
jsonData = JSON.parse(jsonData.replace(/\bNaN\b/g, "null"));
here is remaining function:(any field values can be string,numbers but it should not be NAN
function getEnteredValue() {
var rowIds = $("#salesForecastGrid").jqGrid('getDataIDs');
var ids=[];
var jsonPostData = "[";
for ( var i = 0; i <= rowIds.length-1; i++) {
$("#salesForecastGrid").jqGrid('editCell', i, 2, false);
var forecastedSales = parseFloat($("#salesForecastGrid")
.jqGrid('getCell', rowIds[i], 'forecastedSales'));
if (!((forecastedSales == "") || isNaN(forecastedSales) || (forecastedSales ==0))) {
if (ids.indexOf(rowIds[i])==-1){
ids.push(rowIds[i]);
}
}
}
for ( var i = 0; i <= ids.length-1; i++) {
var forecastedSales = parseFloat($("#salesForecastGrid")
.jqGrid('getCell', ids[i], 'forecastedSales'));
var id = $("#salesForecastGrid").jqGrid('getCell', ids[i],
'id');
var date = $("#salesForecastGrid").jqGrid('getCell',
ids[i], 'day');
if (id < 0) {
id = 0;
}
var record = "{" + "id:" + id + "," + "date:" + date + ","
+ "forecastedSales:" + forecastedSales + "}";
jsonPostData = jsonPostData + record;
if (i != ids.length) {
jsonPostData = jsonPostData + ",";
}
}
jsonPostData += "]";
return jsonPostData;
}
Json Data like:
"[{id:68447,date:04-17-2014,forecastedSales:8420.42},{id:68448,date:04-18-2014,‌​forecastedSales:9912.68},]"

Your problem is that you are creating the JSON manually, and thus end up with invalid JSON. Do yourself a favor and use JSON.stringify:
function getEnteredValue() {
var rowIds = $("#salesForecastGrid").jqGrid('getDataIDs');
var ids=[];
var data = [];
// ...
for ( var i = 0; i < ids.length; i++) {
// ...
data.push(
{id: id, date: date, forecastedSales: forecastedSales}
);
}
return JSON.stringify(data);
}
Since NaN is not a valid value in JSON, it will automatically be converted to null. Example:
> JSON.stringify({a: NaN});
"{"a":null}"
For more info see Using native JSON.

NaN is not acceptable in JSON. JSON specification does not support NaN as a value. Even when javascript object has NaN value, it will be converted to null when you serialise to JSON format.
First of all, JSON is not an Javascript Object. JSON is general format which can be understand by all languages.

Extract value from certain query from string in jQuery

var test = "http://www.example.org/search?q=whatever&another=moretext";
How can I extract another's value (moretext) in the query string above and make a variable out of it?

var test = "http://www.example.org/search?q=whatever&another=moretext";
var another = test.split('another=');
another is an array with another[0] = 'http://www.example.org/search?q=whatever&' and another[1] = 'moretext'.

keep this function in your bag :
function querySt(qsName, url)
{
var theUrl;
if (url == null || url == undefined)
theUrl = window.location.search.substring(1); else theUrl = url;
var g = theUrl.split("&");
for (var i = 0; i < g.length; i++) {
var pair = g[i].split("=");
if (pair[0].toLowerCase() == qsName.toLowerCase())
{
return pair[1];
}
}
return null;
}
Usages
alert(querySt("another")+' '+querySt("q"));