Using Javascript to Parse a Querystring

Javascript has no support for querystring parsing

There maybe times when you need to parse a querystring using Javascript. I have recently found myself requiring to do this when rewriting a web application as lots of places were using inline Javascript script due to parameters being outputed into the HTML source through server side code. I wanted to move as much inline script out of the page source into external files and I found that a lot of cases I could only do this by using Javascript to access the querystring instead of server side code.

As Javascript has no inbuilt objects that you can reference you will either have to create your own one making use of the location.href and location.search objects which refer to the current URL and the querystring portion of the URL.

A lot of scripts will use string parsing to split the querystring up on & and = which is fine if you remember about the # anchor portion of the URL. However my script uses regular expressions to split the querystring up into its constituant parts.

I have created a little object that can be accessed on any page that references it. The features of this object are:

• Parse the current location's querystring or supply your own querystring. It maybe that you have passed a URL encoded querystring as a value within the querystring and once you have accessed this parameter you need to parse it on its own.
• Returns the number of parameters within the querystring.
• Returns the parameters as key/value in an associative array.
• Option to output the parameters as a formatted string.
• Ability to access the anchor value seperatley if it exists.
• Handles parameter values specified multiple times by comma seperating them.
  

The code:

function PageQuery(qry){

this.ParamValues = {};
this.ParamNo = 0;

var CurrentQuery, AnchorValue = "";

//if no querystring passed to constructor default to current location
if(qry && qry.length>0){
 CurrentQuery = qry;
}else{
 if(location.search.length>0){
  CurrentQuery = location.href;
 }else{
  CurrentQuery = "";
 }
}

//may want to parse a query that is not the current window.location
this.ParseQuery = function(qry){ 
  var rex = /[?&]([^=]+)(?:=([^&#]*))?/g;
  var rexa = /(\#.*$)/;
  var qmatch, key, amatch, cnt=0;

  //parse querystring storing key/values in the ParamValues associative array
  while(qmatch = rex.exec(qry)){
   key = denc(qmatch[1]);//get decoded key
   val = denc(qmatch[2]);//get decoded value

   if(this.ParamValues[key]){ //if we already have this key then update it if it has a value
    if(key&&key!="") this.ParamValues[key] = this.ParamValues[key] + ","+val;
   }else{
    this.ParamValues[key] = val;
    cnt++;
   }
  }
  //as no length property with associative arrays
  this.ParamNo = cnt;

  //store anchor value if there is one
  amatch = rexa.exec( qry );
  if(amatch) AnchorValue = amatch[0].replace("#","");
 }

//run function to parse querystring and store array of key/values and any anchor tag
if(CurrentQuery.length){
 this.ParseQuery( CurrentQuery );
} 

this.GetValue = function(key){ if(!this.ParamValues[key]) return ""; return this.ParamValues[key]; }
this.GetAnchor = AnchorValue;

// Output a string for display purposes
this.OutputParams = function(){
  var Params = "";
  if(this.ParamValues && this.ParamNo>0){
   for(var key in this.ParamValues){
    Params+= key + ": " +  this.ParamValues[key] + "\n";
   }
  }
  if(AnchorValue!="") Params+= "Anchor: " + AnchorValue + "\n";
  return Params;
 }
}

//Functions for encoding/decoding URL used in object

//encode
function enc(val){
if (typeof(encodeURIComponent)=="function"){
 return encodeURIComponent(val);
}else{
 return escape(val);
}
}
//decode
function denc(val){
if (typeof(decodeURIComponent)=="function"){
 return decodeURIComponent(val);
}else{
 return unescape(val);
}
}

How to call the code

To make use of the objects functions you can instantiate the PageQuery object by either passing the string that you want to parse as the constructors only parameter or you can pass nothing in which case it will default to the current location's querystring if there is one. Once you have created the object you can then reference the properties you require to return the relevant information.

//create new instance of the object
var qry = new PageQuery(); //defaults to current location if nothing passed to the constuctor
//var qry = new PageQuery("?id=1044&name=Rob+Reid#56"); //parse a specific string instead of using location.search
var id = qry.GetValue("id"); //get value for a parameter called id
var anc = qry.GetAnchor; //get the anchor # value if exists
var no = qry.ParamNo; //get the number of parameters
var s = qry.OutputParams();//return a formatted string for display purposes
var p = qry.ParamValues; //return the array of parameters

//loop through array of parameters
if(p){
for(var z in p){
alert("Query Parameter["+z+"] = " +p[z]);
}
}

So as you can see its a pretty simple but very flexible function that provides me with all the necessary functionality I require when handling querystrings with Javascript.

Click here to download the ParseQuery object script.