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:

  1. var myUrl = "http://www.test.com/testdir/testfile.htm?q=test";  
  2.   
  3. //get the host name of a url  
  4. alert( parseUri(myUrl).host );  
  5.   
  6. //get the query string of a url  
  7. alert( parseUri(myUrl).query );  
  8.   
  9. //get the path of the url  
  10. alert( parseUri(myUrl).path );  

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

  1. /* 
  2.     parseUri 1.2.1 
  3.     (c) 2007 Steven Levithan <stevenlevithan.com> 
  4.     MIT License 
  5. */  
  6.   
  7. function parseUri (str) {  
  8.     var o   = parseUri.options,  
  9.         m   = o.parser[o.strictMode ? "strict" : "loose"].exec(str),  
  10.         uri = {},  
  11.         i   = 14;  
  12.   
  13.     while (i--) uri[o.key[i]] = m[i] || "";  
  14.   
  15.     uri[o.q.name] = {};  
  16.     uri[o.key[12]].replace(o.q.parser, function ($0, $1, $2) {  
  17.         if ($1) uri[o.q.name][$1] = $2;  
  18.     });  
  19.   
  20.     return uri;  
  21. };  
  22.   
  23. parseUri.options = {  
  24.     strictMode: false,  
  25.     key: ["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],  
  26.     q:   {  
  27.         name:   "queryKey",  
  28.         parser: /(?:^|&)([^&=]*)=?([^&]*)/g  
  29.     },  
  30.     parser: {  
  31.         strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,  
  32.         loose:  /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/)?((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/  
  33.     }  
  34. };  
Bookmark and Share

Comments are closed.