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! 8)
1 Comment
Sindre Sorhus · November 15, 2013 at 1:50 PM
A better way would be to parse the query string into an object. The user is then free to modify it as they like. Then stringify it back to a query string. Think of it like JSON.parse/stringify, but for query strings.
https://github.com/sindresorhus/query-string