Changing URL parameters with jQuery

You can find plenty of resources about this topic just by googling the web, most of which will point to jQuery plugins.
But the fact is that it’s so easy to achieve this by simply using jQuery that you do not need a plugin.

The code is pretty much self explanatory:

/*
 * queryParameters -> handles the query string parameters
 * queryString -> the query string without the fist '?' character
 * re -> the regular expression
 * m -> holds the string matching the regular expression
 */
var queryParameters = {}, queryString = location.search.substring(1),
    re = /([^&=]+)=([^&]*)/g, m;

// Creates a map with the query string parameters
while (m = re.exec(queryString)) {
    queryParameters[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}

// Add new parameters or update existing ones
queryParameters['newParameter'] = 'new parameter';
queryParameters['existingParameter'] = 'new value';

/*
 * Replace the query portion of the URL.
 * jQuery.param() -> create a serialized representation of an array or
 *     object, suitable for use in a URL query string or Ajax request.
 */
location.search = $.param(queryParameters); // Causes page to reload

You can clearly improve the regular expression, but the one above meet my needs.

Published by

Samuel Santos

Java and Open Source evangelist, JUG leader and Web advocate for web standards and semantic technologies.

9 thoughts on “Changing URL parameters with jQuery”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>