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
Comments
72 discussions around Read URL GET variables with JavaScript
Older Comments
  1. І’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

  2. nurrohman says:

    thank you so much..

  3. 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 (#)

  4. Alejandra says:

    So helpful! Thank you so much

  5. Miguel says:

    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.

Older Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.