Recently I had to develop a solution which involved changing the HREF attributes of links in the navigation bar of a site. This had to be done on the JavaScript side because at my company we are the 3rd-party JavaScript solution for modifying other companies’ sites. That being said, I came up with one solution because the URL parameter was always the same but I figured I would publicly release the code for doing this in such a way that you can modify the value of any URL parameter:
/**
* @license Copyright 2013 - Chris West - MIT Licensed
*/
(function(expCharsToEscape, expEscapedSpace, expNoStart, undefined) {
/**
* Modifies the given URL, returning it with the given parameter
* changed to the given value. The parameter is added if it didn't
* already exist. The parameter is removed if null or undefined is
* specified as the value.
* @param {string} url The URL to be modified.
* @param {string} paramName The URL parameter whose value will be
* modified.
* @param {string} paramValue The value to assign. This will be
* escaped using encodeURIComponent.
* @return {string} The updated URL.
*/
modURLParam = function(url, paramName, paramValue) {
paramValue = paramValue != undefined
? encodeURIComponent(paramValue).replace(expEscapedSpace, '+')
: paramValue;
var pattern = new RegExp(
'([?&]'
+ paramName.replace(expCharsToEscape, '\\$1')
+ '=)[^&]*'
);
if(pattern.test(url)) {
return url.replace(
pattern,
function($0, $1) {
return paramValue != undefined ? $1 + paramValue : '';
}
).replace(expNoStart, '$1?');
}
else if (paramValue != undefined) {
return url + (url.indexOf('?') + 1 ? '&' : '?')
+ paramName + '=' + paramValue;
}
else {
return url;
}
};
})(/([\\\/\[\]{}().*+?|^$])/g, /%20/g, /^([^?]+)&/);
The following are some example calls to this function:
// Initial URL var url = 'http://example.com/'; alert(url); // http://example.com/?q=search+term url = modURLParam(url, 'q', 'search term'); alert(url); // http://example.com/?q=search+term&name=Guillermo url = modURLParam(url, 'name', 'Guillermo'); alert(url); // http://example.com/?q=search+term+2&name=Guillermo url = modURLParam(url, 'q', 'search term 2'); alert(url); // http://example.com/?name=Guillermo url = modURLParam(url, 'q'); alert(url); // http://example.com/?name=Guillermo&q=termino url = modURLParam(url, 'q', 'termino'); alert(url); // http://example.com/?name=Guillermo url = modURLParam(url, 'q', null); alert(url);
Feel free to re-use the code!