URI Processing With JavaScript

URI Processing with JavaScript

Presented here is a very basic JavaScript wrapper class for various commonly required URI processing tasks. It is easy to use, library independent and small.

URI's are broken down as follows,

The supplied JavaScript URI processing wrapper can save quite a bit of time. Looking up the processes required for basic URI analysis tasks is a mundane task that can now be avoided.

For example, it is often useful to be able to quickly find the current page's hostname, hash or search string.

Convenience functions are also provided to check for strings within a specified area of the URI. E.g. to check that we are at the expected URI hostname.

It is also very useful to be able to get the value of a particular query/search variable. These functions often find their way into my other articles. It is particularly useful for webapps and AJAX-based work.

Although presented as a class, the functions are independent and simple enough to be concatenated into a simple function for your specific purpose.

Example Use


// Create FlameURI class object
var uriProc = new FlameURI();

// Get the value of the query variable 'x'
var x = uriProc.getQueryVar('x');

Source Code

You can reconstruct the bits you want from the source code demonstrated on this page or download it here.

/*
FlameURI 0.24. URI Processing.
Optic Swerve, opticswerve.com
Documented at http://menacingcloud.com/?c=uriProcessing
*/

// FlameURI
function FlameURI() {
	this.id = 'FlameURI';

	// Convert strings to booleans or numbers
	this.convert = function(input) {
		if(input === 'true') return true;
		if(input === 'false') return false;
		if(isFinite(input)) return Number(input);
		return input;

	};

	// Get hash section of the URI
	this.getHash = function() {
		return window.location.hash;

	};

	// Get specified hash query value
	this.getHashVar = function(v) {
		var hash = this.getHash();
		if(hash === '') return;

		var queryStart = hash.search(/\?/);
		if(queryStart < 0) return;

		hash = hash.substring(queryStart + 1);
		return this.convert(this.getVar(v, hash));

	};

	// Get the host name
	this.getHostname = function() {
		return window.location.hostname;

	};

	// Get the path name
	this.getPathname = function() {
		return window.location.pathname;

	};

	// Get the full query string (including '?')
	this.getQuery = function() {
		return window.location.search;

	};

	// Get specified URI query value
	this.getQueryVar = function(v) {
		var uri = this.getQuery();
		if(uri === '') return;

		var queryStart = uri.search(/\?/);
		if(queryStart < 0) return;

		uri = uri.substring(queryStart + 1);
		return this.convert(this.getVar(v, uri));

	};

	// Get the full URL
	this.getURL = function() {
		return window.location.href;

	};

	// Get variable from specified string
	this.getVar = function(v, string) {
		var vars = string.split('&');

		for(var i = 0; i < vars.length; i++) {
			var pair = vars[i].split('=');
			if(pair[0] === v) return pair[1];

		}

		return;

	};

	// Is the specified string in the bookmark (hash)?
	this.inHash = function(searchString) {
		if(this.getHash().indexOf(searchString) > -1) return true;
		return false;

	};

	// Is the specified string in the hostname?
	this.inHostname = function(searchString) {
		if(this.getHostname().indexOf(searchString) > -1) return true;
		return false;

	};

	// Is the specified string in the path name?
	this.inPathname = function(searchString) {
		if(this.getPathname().indexOf(searchString) > -1) return true;
		return false;

	};

	// Is the specfied string in the full URL?
	this.inURL = function(searchString) {
		if(this.getURL().indexOf(searchString) > -1) return true;
		return false;

	};

	return true;

}

Comments

Comments, suggestions or feedback via Optic Swerve on Twitter please.

Follow the author on Twitter.

ProtoFluid. ‘Effortless responsive web design testing’.

Canvas Generated Icons. Read more.

Targeting Windows 8 Snap Mode. Read more.

CSS @viewport rule or viewport meta tag? Read more.

The Responsive Viewport. Missing piece of the responsive web design puzzle? Read more.

Menacing Cloud