Url related tasks in JavaScript

It’s very common to pass some inputs to a web page through (parameter,value) pair in the url. A sample url might be like the following-

http://www.mywebpage.com?username=Alor%20Chhota&country=Bangladesh

If you look closely to the url, you’ll find the following facts

§ (Parameter, value) pair appears like ParamName=ParamValue style.

§ First parameter is preceeded by ‘?’ and later parameters are preceeded by ‘&’. Note: first parameter may also be preceeded by ‘#’. It restricts the page from loading again even after changing the url.

§ The value of the parameter username is “Alor%20Chhota”, although actually it is “Alor Chhota”. Here the space character has been replaced by “%20”. In fact, space and some other characters are not shown in actual form, rather they appear in encoded form. So to get the actual value, we must decode those values.

Here in this blog, the JavaScript implementaion of the following two classes has been given.

§ UrlEncoderDecoder : Responsible for encoding & decoding of url

§ UrlManager : Responsible for finding a parameter value from a url. It uses the above class.

Using these classes, the parameter value can easily be extracted.

Class : UrlEncoderDecoder

=======================

function UrlEncoderDecoder()
{
// public method for url encoding
this.encode = function (string)
{
return escape(this._utf8_encode(string));
}

// public method for url decoding
this.decode = function (string)
{
return this._utf8_decode(unescape(string));
}

// private method for UTF-8 encoding
this._utf8_encode = function (string)
{
string = string.replace(/\r\n/g,"\n");
var utftext = "";

for (var n = 0; n < string.length; n++)
{

var c = string.charCodeAt(n);

if (c < 128)
{
utftext += String.fromCharCode(c);
}
else if((c > 127) && (c < 2048))
{
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else
{
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
}

// private method for UTF-8 decoding
this._utf8_decode = function (utftext)
{
var string = "";
var i = 0;
var c = c1 = c2 = 0;

while ( i < utftext.length )
{
c = utftext.charCodeAt(i);
if (c < 128)
{
string += String.fromCharCode(c);
i++;
}
else if((c > 191) && (c < 224))
{
c2 = utftext.charCodeAt(i+1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
}
else
{
c2 = utftext.charCodeAt(i+1);
c3 = utftext.charCodeAt(i+2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}


Class : UrlManager
==============
function UrlManager()
{
this.urlEncoderDecoder = new UrlEncoderDecoder();
this.getParamValueFromUrl = function (Url, ParamName)
{
var regexS = "[\\?&#]"+ParamName+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( Url );
if( results == null )
return "";
else
return this.urlEncoderDecoder.decode(results[1]);
}
};

Sample Code:
============
var myUrlManager = new UrlManager();
var url = window.location.href; // current url
var userName = myUrlManager.getParamValueFromUrl(url, "username");
var country = myUrlManager.getParamValueFromUrl(url, "country");