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