jQuery URL Parser v1.0
This jQuery URL Parser is a little plugin that I wrote a while back and have now decided to release properly. It’s based on Steven Levithan’s regex-based URI parser, and allows you to quickly and painlessly access pretty much any bit of information within the URL.
Why would you need to pull information out of the URL? Well there are lots of potential reasons. I have been using it on a CodeIgniter-based CMS project recently where each page initially loads the same one JS file, which in turn selectively loads others depending on the URL (roughly mirroring the way CodeIgniter loads different controllers by parsing the URL segments). I also often use it just to get the base URL of the site so that I can use absolute URL references in my JavaScript, without having to change anything when the site moves domains – say from the testing to the production server. It also offers an easy way to access query string parameters for use in your scripts, and much more.
You can download the plugin from the project page, together with the documentation etc.
I’ll post up any updates to the plugin here, so grab the RSS feed if you want to stay updated. For bug reports or feature requests please visit the jQuery plugins page at http://plugins.jquery.com/project/url_parser, or if you have any other questions or queries, please drop me an email at mark[at]allmarkedup[dot]com and I will do my best to get back to you as soon as I can – but I’m pretty busy at the moment so please be patient!
19 Responses to “jQuery URL Parser v1.0”
Adrian says:
I think the documentation at http://projects.allmarkedup.com/jquery_url_parser/ is wrong in that jQuery.URL should be jQuery.url
James says:
Thanks for this, im sure it will be useful.
A quick addition that would be good: if you could also target a link element using a jquery selecotr and then just pull the details of the href straight out of the targeted element.
Cheers
Rob says:
In the same vein, I’ve coded up a JavaScript URI object based on Steven’s parser.
You can try out an interactive example here: http://appengine.bravo9.com/b9j/example/uri/
Mark says:
Thanks @Adrian – documentation has been amended.
@Rob – nice! Good work, looks very comprehensive.
Jacob says:
Mark — along with the online documentation, you might also want to fix the readme.htm in your zip file.
Mark says:
Thanks @jacob, missed that one! Should all be updated now.
Nek.D says:
There’s a little error in your doc (online & offline)
“jQuery.url.setURL(“http://allmarkedup.com/category/javascript/#footer”).attr(“anchor”) // returns ‘footer’”
should be setUrl
Anyway, i love this plugin, thanks
josh says:
Please forgive me if I am way off track.
Is it possible to display a different html page based on the inbound url a user comes from to access my site. Say if I wanted people coming from “x” site to see a certain block of conent but I don’t want people coming from “y” site to see it but something special for them?
Make sense?
Any ideas are much appreciated. Trying to learn more about this possibility.
Mark says:
@Nek.D – thanks for the heads up, I have amended the docs now. Glad you like it!
@josh – you could definitely do this, but you probably woudln’t want to do it using javascript. The best way to do it would be to use a server-side language to check the referer – in PHP you could do this using $_SERVER["HTTP_REFERER"] to see where the use had come from.
But be warned – it is pretty easy to spoof a referer string so don’t use it for anything that that needs to be secure!
Hope that helps.
josh says:
thanks for the feedback. I am not sure I follow you with the PHP suggestion. I am not as familiar. If you have any suggestions where to find more about what you mentioned please let me know.
Mark Drew says:
Just curious here, but can I pass “ANY” url string and parse that? how would you do that? I can’t see it in the docs (rather than just passing the current url) ?
Mark says:
@Mark Drew – You can use any url string by chaining in the setUrl() method, so if you wanted to parse the url “http://mysite.com/different_url.php?test=4″ to get the value of ‘test’ from the query string you would do:
jQuery.url.setUrl(“http://mysite.com/different_url.php?test=4″).param(“test”)
I hope that makes sense! Let me know if anything is not clear.
no link says:
no link!
Katie says:
Hi there,
This url parser is great! Thanks Mark :o) But I have recently started using it on the same page as ui tabs (see http://stilbuero.de/jquery/tabs_3/) . On pages with tabs, I get the following javascript error jQuery.url is null or not an object. Do you know why this might be? Is there a way for me to fix this so that the two plugins don’t interfere with each other?
Let me know if you need more info! (I’m afraid I can’t send you a link to the problem because it’s an intranet).
Many thanks,
Katie
akahn says:
It seems that this plugin is only for accessing information from the URL. Is there a way to set, for example, the anchor string, using this plugin? If that’s not possible, what’s a good way to do that?
Steve says:
@akahn — looks to me that the best way to do this is with http://plugins.jquery.com/project/query-object
Frankly, all the jQuery plugins that deal with this fall short in this regard. The main features I feel are missing are:
(since the url params are essentially a hash, we should be able to get an array of keys and values easily)
param.keys
param.values
These methods should also SET the keys/values if you supply them with a (shallow) array
And for this particular one, I think the attr and param methods should also be used for SETTING values, as is the standard for many core jQuery methods:
jQuery.url.attr(“host”,”google.com”); // would redirect to google
jQuery.url.param(“myParam”,”foobar”); // would set “myParam=foobar” in the parameter string
Maybe I’ll take an hour or two and enhance one of these plugins to do this properly.
Cheers.
-Steve
Murat Çorlu says:
Good work Mark! Thank you for share!
I needed a `params` method to get all querystring methods by hash data and I wrote a patch for this:
jQuery.extend(jQuery.url, {
params: function(){
var paramsArray = this.attr(‘query’) ? this.attr(‘query’).split(‘&’) : [];
var params = {};
for(param in paramsArray) {
var prm = paramsArray[param].split(‘=’);
params[prm[0]] = prm[1];
}
return params;
}
});
For example;
jQuery.url.setUrl(‘http://example.com/?brand=12&model=25′).params()
returns (object):
{brand:12, model:25}
Maybe someone need this too…
Mark says:
Hi Murat,
Thanks for that – but have you seen my new ‘beta’ version of the URL parser/setter plugin? http://allmarkedup.com/journal/2009/10/jquery-url-toolbox-beta/ It has methods of accessing querystring params and lots of other stuff, you might find it useful.
Still very beta though (and not much documentation at the moment I’m afraid) so if you do try it and spot any bugs then please let me know.
Jan-Wijbrand says:
Hi,
Thanks for making this plugin available. Very useful.
Question: What is the canonical way for parsing URLs in “strict” mode? It must something obvious, but I cannot find it…
I tried: $.url.setMode(“strict”) but still the URLs are parsed “loosely”. In the end I just copied the “strict regex” into the “loose regex” to get strict parsing, but well, that’s an ugly ugly hack of course.
Thanks