How to Get Url Parameters & Values using jQuery

In this post, I would like to share a little jQuery code snippet that used to get url parameters and their values more convenient.

Recently, while working on one of my projects, I needed to read and get url parameter values of the current page that was constructed and sent by PHP script. I came across this short and sweet JavaScript code snippet by Roshambo that does just that.

Function to get url parameters

// Read a page's GET URL variables and return them as an associative array.

function getUrlVars()

{

var vars = [], hash;

var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

for(var i = 0; i < hashes.length; i++)

{

hash = hashes[i].split('=');

vars.push(hash[0]);

vars[hash[0]] = hash[1];

}

return vars;

}

The function returns an array/object with your URL parameters and their values. For example, consider we have the following URL:

http://www.example.com/?me=myValue&name2=SomeOtherValue

Calling getUrlVars() function would return you the following array:

{
    "me"    : "myValue",
    "name2" : "SomeOtherValue"
}

To get a value of first parameter you would do this:

var first = getUrlVars()["me"];

// To get the second parameter

var second = getUrlVars()["name2"];

To make the script syntax to look more jQuery like syntax I rewrote it as an extension for jQuery:

$.extend({

getUrlVars: function(){

var vars = [], hash;

var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

for(var i = 0; i < hashes.length; i++)

{

hash = hashes[i].split('=');

vars.push(hash[0]);

vars[hash[0]] = hash[1];

}

return vars;

},

getUrlVar: function(name){

return $.getUrlVars()[name];

}

});

Now, if you include the above code in your javascript file, you can get URL parameter values in the following way:

// Get object of URL parameters

var allVars = $.getUrlVars();

// Getting URL var by its nam

var byName = $.getUrlVar('name');

That’s it! You might also find the following jQuery related articles on this blogs interesting:

• Change Window/Document Title with jQuery
  
• Horizontal & Vertical Scrollbar jQuery Plugin
• Responsive Menu using CSS & jQuery