Menacing Cloud

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,

uri breakdown

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, Documented at */ // FlameURI function FlameURI() { = '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 =\?/); 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; }; // Get specified URI query value this.getQueryVar = function(v) { var uri = this.getQuery(); if(uri === '') return; var queryStart =\?/); 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, suggestions or feedback via Optic Swerve on Twitter please.

Follow the author on Twitter.

ProtoFluid. ‘Effortless responsive web design testing’.

Previous Articles

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.

Getting the Viewport Scale.
Read more.

Hiding the iPhone Address Bar.
Read more.

Orientation Correct Screen Width.
Read more.

iPhone Title Modification.
Read more.

Optimising for High Pixel Density Displays.
Read more.

CSS3 Media Query Prototyping With ProtoFluid.
Read more.

AJAX Kill Switch. Version 2.
Read more.

URI Processing With JavaScript.
Read more.

Source Code

All source code is provided for free.

A standard disclaimer of warranty and limitation of liability applies.