Parsing URLs in Javascript

Sun, Jun 28, 2009

Tech Tips

Javascript does not have a built in method for parsing a url (to get the individual parts that make up a url). Here is a link to a great little function that does all you need, called parseURI.

It uses regex to quickly break apart a url into source, protocol, authority, userInfo, user , password, host, port, relative, path, directory, file, query, and anchor.

Here are few examples:

var myUrl = "http://www.test.com/testdir/testfile.htm?q=test";

//get the host name of a url
alert( parseUri(myUrl).host );

//get the query string of a url
alert( parseUri(myUrl).query );

//get the path of the url
alert( parseUri(myUrl).path );

Here is a copy of the Steven Levithan’s code:

/*
	parseUri 1.2.1
	(c) 2007 Steven Levithan <stevenlevithan.com>
	MIT License
*/

function parseUri (str) {
	var	o   = parseUri.options,
		m   = o.parser[o.strictMode ? "strict" : "loose"].exec(str),
		uri = {},
		i   = 14;

	while (i--) uri[o.key[i]] = m[i] || "";

	uri[o.q.name] = {};
	uri[o.key[12]].replace(o.q.parser, function ($0, $1, $2) {
		if ($1) uri[o.q.name][$1] = $2;
	});

	return uri;
};

parseUri.options = {
	strictMode: false,
	key: ["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],
	q:   {
		name:   "queryKey",
		parser: /(?:^|&)([^&=]*)=?([^&]*)/g
	},
	parser: {
		strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
		loose:  /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/
	}
};
Bookmark and Share

Comments are closed.