parseURL

6th January 2009

This script is a JavaScript implementation of PHP's parse_url method. It expects a fully-qualified URL as its input argument, and returns an object-literal of the various URL parts.

The script will be useful whenever you need to extract individual properties from a string URL, rather than having a pre-existing location object to work with. The script effectively creates a location object, and its properties are named accordingly:

href

the complete URL, unmodified from its input value

protocol

the server protocol, including the trailing colon, for example http:

host

the host name including any explicit port number, for example www.brothercake.com:21

hostname

the host name excluding any port number, for example www.brothercake.com

port

the port number, for example 21

pathname

the path from the web root to the current page, for example /site/resources/scripts/parseurl/

hash

any fragment identifier at the end of the URL, including the leading hash symbol, for example #content

search

any query string data in the URL, including the leading question-mark, for example ?q=accessible+javascript

All values are strings; if a particular property has no value then it will be an empty string.

Get the script

Download the zipfile [1K] and unzip it into your site directory, then you can either include the script on your page as it is:

<script type="text/javascript" src="parseurl.js"></script>

or copy the code into another script, and work with it from there:

//PU1.0 :: parseURL by brothercake - http://www.brothercake.com/

//parse a URL to form an object of properties
function parseURL(url)
{
    //save the unmodified url to href property
    //so that the object we get back contains
    //all the same properties as the built-in location object
    var loc = { 'href' : url };

    //split the URL by single-slashes to get the component parts
    var parts = url.replace('//', '/').split('/');

    //store the protocol and host
    loc.protocol = parts[0];
    loc.host = parts[1];

    //extract any port number from the host
    //from which we derive the port and hostname
    parts[1] = parts[1].split(':');
    loc.hostname = parts[1][0];
    loc.port = parts[1].length > 1 ? parts[1][1] : '';

    //splice and join the remainder to get the pathname
    parts.splice(0, 2);
    loc.pathname = '/' + parts.join('/');

    //extract any hash and remove from the pathname
    loc.pathname = loc.pathname.split('#');
    loc.hash = loc.pathname.length > 1 ? '#' + loc.pathname[1] : '';
    loc.pathname = loc.pathname[0];

    //extract any search query and remove from the pathname
    loc.pathname = loc.pathname.split('?');
    loc.search = loc.pathname.length > 1 ? '?' + loc.pathname[1] : '';
    loc.pathname = loc.pathname[0];

    //return the final object
    return loc;
}

Once it's in your codebase you can call it as required, storing the object it returns for further use, for example:

var url = 'http://www.google.com/search?q=accessible+javascript';

var parts = parseURL(url);

alert(parts.host);        //alerts "www.google.com"

(This script was originally inspired by a blog post I wrote for SitePoint, Dealing with unqualified HREF values (Part 2))