New Project Released: JZ Parse URL jQuery Plugin

In the advent of the recent URL Parsing tutorials (DOM URL Parsing and Query String Parsing) I’ve decided that we put the knowledge we’ve gained – plus some compatibility fixes – into practice and create a lightweight jQuery plugin that quickly and simply handles all of your URL Parsing needs. Now, rather than using regular expressions (that so few understand) or using the techniques I’ve taught to you yourself, I’ve made it simple to use a single utility function attached to jQuery.

JZ Parse URL Documentation

jQuery Plugin… Or Is It?

I need to clarify one thing about this library: it isn’t necessarily a jQuery plugin. Now I need to clarify that statement. This project is a jQuery plugin, but only if jQuery is already loaded. If the jQuery object wasn’t found, this library will attach itself to the JZ namespace, allowing you to run this plugin standalone, or with alternate libraries.

How Does It Work?

It’s really very simple. In the examples below, we’re assuming that the plugin is in standalone mode. If you’re using it as a jQuery plugin, then just replace all of the occurences of JZ with $ or jQuery. There are two different ways you can use the plugin: with or without a parameter. The parameter is a string containing the URL. If no parameter is supplied, the current URL is used, otherwise it parses the URL given.

// Parse the current URL
JZ.parseURL();

// Parse a defined URL
JZ.parseURL('http://example.com');

Here are all the properties on the object that is returned from parseURL. You can even use get to retrieve individual query parameters.

var url : $.parseUrl("http://example.com:3000/pathname/?search:test&param%202:some%20value&unaryVar#hash"),

/*******
url = {
    hash      : "#hash",
    host      : "example.com:3000",
    hostname  : "example.com",
    href      : "http://example.com:3000/pathname/?search:test&param%202:some%20value&unaryVar#hash"),
    path      : "/pathname/", // alias for pathname
    pathname  : "/pathname/",
    port      : "3000",
    protocol  : "http:",
    query     : { search: "test", param 2: "some value", unaryVar: "true" }, // parsed search string
    search    : "?search=test&param%202=some%20value&unaryVar",
    url       : "http://example.com:3000/pathname/?search:test&param%202:some%20value&unaryVar#hash", // alias for href
}
*********/

Concluding

The project page for this plugin is still being built but you’ll see it up in no time. That isn’t the only thing you can look forward to, though. For Thursday’s post, you’ll see the return of the TUTORIAL! I’ve been so busy with projects that I’ve neglected my responsibility to teach you fine people something new. The Thursday post might be moved to Friday, but it’ll definitely be available this week. Look forward to those two things, comment with your feedback, and, as always, Happy Coding!