Use your left/right keys to browse tutorials
Read URL GET variables with JavaScript

Read URL GET variables with JavaScript

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on October 28, 2009

I had the need to read a URL GET variable and complete an action based on the url parameter. I searched high and low for a solution and came across this little piece of code on Snipplr. It basically reads the current page url, perform some regular expression on the URL then saves the url parameters in an associative array, which we can easily access.

So as an example if we had the following url with the javascript at the bottom in place.

http://papermashup.com/index.php?id=123&page=home

All we’d need to do to get the parameters id and page are to call this:

var first = getUrlVars()["id"];
var second = getUrlVars()["page"];

alert(first);
alert(second);

The Code

function getUrlVars() {
	var vars = {};
	var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
		vars[key] = value;
	});
	return vars;
}


More tutorials from Papermashup
  • pamela

    dear all

    I tried the below code :
    function getUrlVars()
    {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf(‘?’) + 1).split(‘&’);
    //var hashes = window.location.href.valueOf().split(‘?’).slice(1)[0].split(‘&’);
    for(var i = 0; i < hashes.length; i++)
    {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
    }
    return vars;
    }
    function test()
    {
    //var hash =getUrlVars();
    //alert(hash['hello']);

    var first = getUrlVars()["id"];
    var second = getUrlVars()["page"];
    alert(first);
    alert(second);
    }

    but I am getting 'undefined' how to solve it?
    Please help

  • Andy

    Hi, this is superb.
    Do you have a regex for it to pass decimals instead of text?
    I need to pass values like 102.34, -35.76, 3.876

    Any help would be much appreciated.

  • Allison C

    Thanks! This helped a lot

  • http://offthegridsf.com/larkspur Lodge Discounted (Hotels_Discount) on Tweets

    І’m extremely inspired along with your writing abilities and also with the structure in your weblog. Is that this a paid subject matter or did you customize it yourself? Anyway stay up the nice high quality writing, it is rare to peer a nice blog like this one nowadays..

    my web blog … Lodge Discounted (Hotels_Discount) on Tweets

  • nurrohman

    thank you so much..

  • http://ken.nu Ken Engström

    Hello

    Awesome snippet, really liked it but there is a small glitch in the regex.
    Old regex /[?&]+([^=&]+)=([^&]*)/gi
    New regex /[?&]+([^=&]+)=([^&]*?)[#.]/gi

    adds support for hash links (#)

  • Alejandra

    So helpful! Thank you so much

  • Miguel

    I know this is very old, but still…

    There is the case of multiple values where this function is not working correctly (eg: http://papermashup.com/index.php?id=123&page=home&id=234).

    I changed this part:
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    if(vars[key]){
    if(vars[key] instanceof Array){
    vars[key].push(value);
    }else{
    vars[key] = [vars[key], value];
    }
    }else{
    vars[key] = value;
    }
    });

    There is probably a more efficient way of doing it, but the key point is that when you have multiple values you should have an array of values in the vars entry.