Read URL GET variables with JavaScript
Yesterday 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(id); alert(page);
The Code
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
UPDATE: this post was originally titled ‘Read URL GET variables with jQuery’ but a few of you pointed out that this is in fact just plain JavaScript. Totatlly my mistake. I planned to originally write a tut on reading url variables with jQuery. But at the last minute I found the 3 lines of code above that completely solved my problem, trouble was i forgot to adjust the title.
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!
@Balaji have you seen my article on form highlighting?
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
Social comments and analytics for this post…
This post was mentioned on Twitter by metoikos: Read URL GET variables with jQuery | Papermashup.com http://ff.im/-aGQ9b...
Hello,
Lovely article but my question is: What’s faster using Jquery’s GET variables or using PHP’s GET variables?
Thank You
I may be missing something here, but isn’t this just plain Javascript?
What about window.location.search ?
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;
}
})();
Woow! and Thanks
“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.
If a key repeats (e.g. checkboxes), only the value of the last pair will be available.
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;
}
thank you
thanks for the code
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'];
@molokoloco, Thanks!
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);
Leave a comment...
Connect
Latest Poll
Recent Posts
Design & Dev Jobs
Full-time and freelance job opportunities available at Authentic Jobs:
Post a job and reach web professionals everywhere.