Scroll to top
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);
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
Chris says: Shouldn’t it be alert(first) and alert(second)?
Talakisew Binor says: Very interesting, easy and valuable snippet.
Thanks,
Pete says: This worked like magic! Thank you for sharing 
Correction:
Lines 04 and 05 in first snippet must be:
alert(first);
alert(second);
CaoS says: Thanks
Best regards
Falguni says: Thanks for snippet.it is very useful and easy.
Vivek Shrivastava says: Hello Friends,
I want the java script code to get all bookmarked url’s .
Thanks
Awesome Post. I actually use this technique to solve a client problem instantly over the phone. It was a real live saver. Thanks.
I enjoyed your article, it was informative and entertaining. I don’t know much about this trackback thing I’ll link to your site from my blog instead. Great stuff – I’ll keep an eye out for more.
Rush says: You saved my day.
Nox says: I love you ^^
you made my day
jon mortimer says: Sorry for this post since it is a year old but I have a question. I am a faily newbie and appreciate any assistance. Firstly, where do I place this code? I’m assuming I can put it into my html file within javascript brackets. I’ve done that — how do I use the variable though, since it is outside the “function”? Obviously if I just place the variables on an html page it will just display as text.
Hi Jon,
No Problem, you simply need to add both code snippets between script tags within you page head then save your page and upload it to your web server and visit the page. at first you wont see anything but then add at the end of the URL in your browser ?id=1234 then you should see 1234 alerted. I’ve made a typo in the code snippet. the alerts should be alert(first); alert(second); the ‘id’ and ‘page’ can be any get variable that you want to pick up with javascript.
Hope that helps
Ashley
Anyone looking to read the #Anchor from a url using javascript such as index.html#welcome try this.
var urlanchor = self.document.location.hash.substring(1);
Ok, thank, great regex
here the code to integrate with jQuery
$.extend({
getUrlVars: function() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; });
return vars;
}
});
// var name = $.getUrlVars()['name'];
stevej says: function getUrlVars(url) {
var vars = {};
var url = url? url.toString().split(‘?’).pop()
: window.location.search.slice(1);
url.replace(
/([^=&]+)=([^&]*)/gi,
function(m,key,value) {
key = unescape(key);
if (key) {
value = unescape(value);
if (key in vars) {
if (vars[key] instanceof Array)
vars[key].push(value);
else
vars[key] = [vars[key], value];
} else
vars[key] = value;
}
});
return vars;
}
stevej says: If a key repeats (e.g. checkboxes), only the value of the last pair will be available.
jared says: “Remember you need to include the jQuery framework.”
I think not. That’s plain, old Javascript.
@jared thanks for pointing that out, quite a few people contacted me about that. My mistake see the updated post above. 
Paul Sayre says: Here is a way to do the same thing, only caching the results so the regex is only run once.
var getUrlVars = (function() {
var vars;
return function() {
if(vars !== undefined) return vars;
vars = {};
window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
})();
Ledopsi says: What about window.location.search ?
Kevin says: I may be missing something here, but isn’t this just plain Javascript?
Davinder says: Hello,
Lovely article but my question is: What’s faster using Jquery’s GET variables or using PHP’s GET variables?
Thank You
Pingback: uberVU - social comments
Here is another article that I ran across to do the same thing… code is slightly different, but end result is same.
FYI, I will be tech tweeting your blog post today Thnx
Have you given any thoughts to jQuery Form Highlighting? I’ve been hard pressed to find good resources, and judging from this article I’m guessing you may have something valuable to say. Thanks in advance!
Designer and web developer, Co-founder and Technical Director at Harkable.com London. Previously I worked at InMobi, Spotify and MySpace. Interests include photography and making short videos. Also an avid F1 fan.
Follow us on Twitter and get in-stream updates.
Subscribe to all the Papermashup tutorials and articles straight to your RSS reader.
Sign up and get all the Papermashup tutorials straight to your inbox.
33 discussions around Read URL GET variables with JavaScript