URI.js – JavaScript library for working with URLs

URL is the address of World Wide Web page. A URL is a formatted text string used by Web browsers, email clients and other software to identify a network resource on the Internet. Network resources are files that can be plain Web pages, other text documents, graphics, or programs. URI and URL are sometimes used as synonyms but there is little difference between them. URL is technically a type of URI. For example: http://www.example.com/index.php is a URL. URL consists of scheme (or protocol), authority, path and query string. There may also fragment in the URL which the string after # sign in the URL.

We may sometime need to manipulate the url in our site. We can manipulate the URL string from the Javascript side also. Using pure javascript to manipulate is not impossible but very tedious. URI.js is the Javascript library for working with URLs. It offers a “jQuery-style” API (Fluent Interface, Method Chaining) to read and write all regular components and a number of convenience methods like .directory() and .authority().

URI.js offers simple, yet powerful ways of working with query string, has a number of URI-normalization functions and converts relative/absolute paths. While URI.js provides a jQuery plugin. URI.js itself does not rely on jQuery. You don’t need jQuery to use URI.js.

How to use it?
First you need to include the javascript library in your page. You can download it from here. You can find URI.js file in the src folder. Now you are ready to use the awesome feature of this javascript library.
Lets take an example of manipulating URL string in ‘jQuery style’.

// mutating URLs  
URI("http://example.org/foo.html?hello=world")      
.username("rodneyrehm")           
// -> http://rodneyrehm@example.org/foo.html?hello=world      
.username("")           
// -> http://example.org/foo.html?hello=world      
.directory("bar")          
// -> http://example.org/bar/foo.html?hello=world      
.suffix("xml")              
// -> http://example.org/bar/foo.xml?hello=world      
.hash("hackernews")          
// -> http://example.org/bar/foo.xml?hello=world#hackernews      
.fragment("")          
// -> http://example.org/bar/foo.xml?hello=world      
.search("") // alias of .query()          
// -> http://example.org/bar/foo.xml      
.tld("com")          
// -> http://example.com/bar/foo.xml      
.search({ foo: "bar", hello: ["world", "mars"] });          
// -> http://example.com/bar/foo.xml?foo=bar&hello=world&hello=mars

If you want to add ‘username’ in the URL string the use username() function and the library will place the name in the correct place and you dont need to worry a bit. Lots of API functions are available in the library like directory(), suffix(), hash(), fragment(), search(), tld(), hostname(), port(), domain(), subdomain(), etc. This plugin surely makes our life easy in manipulation of URL. relativeTo() and absoluteTo() functions are there to calculate the relative and absolute paths. Also you can easily normalize and clean the URL.

Want to compare two URLs. Dont worry! equals() function will check the URLs and return output as true or false. Moreover parsing URN will also be piece of cake using this library. In the latest version, it also offers jQuery integration. For the plugin to work, you need to regularly loadURI.js, as well as jquery.URI.js. URI.js does not depend on jQuery unless you want to use the URI.js jQuery Plugin.

We must appreciate the author of the library Rodney Rehm for the creation of such useful library.

You can find whole API documentation here [API Documentation]. If you want to understand more about the URL, visit this link [Understanding URIs].

There are some alternatives of URL manipulation library, if you dont like this URI.js.

• The simple URL Mutation “Hack” (jsPerf comparison)
• URI Parser
• jQuery-URL-Parser
• URL.js
• furl (Python)
• mediawiki Uri (needs mw and jQuery)
• Google Closure Uri
• URI.js by Gary Court
• jurlp