QueryString with javascript (v33)

Revision 33 of this benchmark created by uyguyt on

Description

Test two methods of retrieving QueryString values with javascript.

Preparation HTML

<script>
  var query = "q=my+search+query&value=7&foo=&bar=hello&bar=world#fragment";
  
  window.getParams1 = function(q) {
   return (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i) {
     var p = a[i].split('=');
     if (p.length != 2) continue;
     b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return b;
   })(q.split("&"));
  };
  
 var pl     = /\+/g,
        search = /([^&=]+)=?([^&]*)/g;

window.getParams2 = function() {
    var match,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); };

    var urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
    return urlParams;
};


window.getParams3 = function(qsRAW) {

    if(!qsRAW) return {};
    var qs = {};
    var qsLen = qsRAW.length;
    var curKey = "";
    var curVal = "";
    var compilingKey = true;

    for(var i = 0; i < qsLen; i++) {

      var char = qsRAW[i];

      //If we've hit an equal sign, and we're not on the first character, then
      //we should stop compiling our key string, and should move to the val string
      if(char === "=" && i !== 0 && compilingKey === true) {

        compilingKey = false;

        //We've hit an &, and we're in value compile mode, or we're at the last character --> Store the curVal into curKey.
      } else if(char === "&" || char === ";" || i === qsLen-1) {

        var decodedCurVal = decodeURIComponent(curVal);

        //If the key has [] as the last two chars, cut them off. We're dealing with an array of values.
        if(curKey.slice(-2) === "[]") curKey = curKey.slice(0,-2);

        //If we already have a value for this key, turn it into an Array and push the next value into it.
        if(typeof qs[curKey] !== "undefined") {

          if(typeof qs[curKey] === "string") {

            var tmpVal = qs[curKey];
            qs[curKey] = new Array();
            qs[curKey].push(tmpVal);

          };

          qs[curKey].push(decodedCurVal);

        //First time we're seeing this key, just assign the value to it
        } else {

          qs[curKey] = decodedCurVal;

        }

        curKey = "";
        curVal = "";
        compilingKey = true;

      } else {

        if(compilingKey) {
          curKey += char;
        } else {
          curVal += char;
        }

      }
    }

    return qs;

  };


window.getParams4 = function (s) {
        var obj = {}, isKey = true, key = '', val = '', chr;
        for(var i=0, l=s.length; i<l; i++){
                chr = s[i];
                if(chr === '=') {
                        isKey = false;
                        continue;
                } else if(chr === '&') {
                        isKey = true;
                        obj[key] = decodeURIComponent(val);
                        key = '';
                        val = '';
                        continue;
                } else if(chr === '#') {
                        break;
                } else if(chr === '?') {
                        continue;
                }
                if(isKey){
                        key += chr;
                } else {
                        val += chr;
                }
        }
        if(key !== ''){
                obj[key] = decodeURIComponent(val);
        }
        return obj;
};

function getQueryString(url) {  
  var qs = {};  
    qs = (function(a) {
      var b = {}, 
          c;
      for (var i = 0; i < a.length; i++) {
        c = a[i].split("=");
        b[decodeURIComponent(c[0])] = decodeURIComponent(c[1]); 
      }
      return b;
    }) (url.split("&"));    
  
  return qs;
  
}

</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Split method
var params = window.getParams1(query);

var search = params.q;
var value = params.value;
var foo = params.foo;
var bar = params.bar;
var undef = params.undefinedstring;
ready
Regex method
var params = window.getParams2(query);

var search = params.q;
var value = params.value;
var foo = params.foo;
var bar = params.bar;
var undef = params.undefinedstring;
ready
Advanced (but has bugs) String Scan Method
var params = window.getParams3(query);

var search = params.q;
var value = params.value;
var foo = params.foo;
var bar = params.bar;
var undef = params.undefinedstring;
ready
Simple String Scan Method
var params = window.getParams4(query);

var search = params.q;
var value = params.value;
var foo = params.foo;
var bar = params.bar;
var undef = params.undefinedstring;
ready
My test
var params = window.getQueryString(query);

var search = params.q;
var value = params.value;
var foo = params.foo;
var bar = params.bar;
var undef = params.undefinedstring;


 
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.