QueryString with javascript

JavaScript performance comparison

Revision 2 of this test case created by Andrew Petersen

Info

Test three methods of retrieving QueryString values with javascript.

Note: the node-querystring library is actually more advanced than the others, since it allows for array params: param1[]=a&param1[]=b, etc.

Preparation code

<script>
  var query = "source=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FLine_of_succession_to_the_British_throne&origin=http%3A%2F%2Fen.wikipedia.org&source_title=Line+of+succession+to+the+British+throne+-+Wikipedia%2C+the+free+encyclopedia&citation_text=This+list+is+sectioned+roughly+every+other+generation+with+some+exceptions.&content=%25C3%2594%255Cks%25C3%259B%25C2%25B8%25C3%258E%25C3%25BE-%25C3%25BB%2521%25C3%25B3%25C2%25B6gF%251EY%25C2%258A%25C3%25A3%25C3%25A4%25C2%25A3%25C2%25AFi%25C3%2592%2524%25C3%258D%25C3%2585i%25C2%25B7%25C3%25BD%25C3%25A2%25C2%25A1%2524%25C3%259Ab%25C2%25A2%255Bu%25C2%2589%25C3%25A3%25C3%25BE%25C3%25BA%2517%2500%25C2%25A9%25C2%259B%2525_%25C2%2592%25C3%25B6%25C2%259C%25C3%2599%25C3%259Dml%25C2%2589%25C2%25A2%2540%2510%2500%25C2%2581%2507%2520%25C2%2593%2523s%25C3%25B4%25C3%2597%25C3%25B8%25C3%258Bh%25C3%25B6%25C3%25BDvrd%25C3%25A8n%25C3%25AA%257B%25C3%25B0u%25C3%25BB8%25C2%25BC%25C2%25BA%2518%25C3%2581%25C3%2585%25C2%2591ahG%25C3%2586%2514%25C3%25BE%257D3G%25C3%25B2b%253C%251B%25C3%2583%25C2%2583%25C2%25BF%253F%25C3%258D%25C2%25AE%25C2%25AF%25C3%25A0%25C2%25BB%25C3%259B%25C2%2581%253E%25C3%25BA%252CfA%2522R%2511%2506%25C3%258C%25C2%2593%25C2%25BD%25267%25C3%25B0%25C2%25AA%2524%25C3%25A0%25C2%25A6itd%250Ed%25C3%25BBj%25C2%25B5%25C3%25AA%25C2%25AC%25C3%258CN%2518%252F%25C3%25A1fv%250F%251F%25C2%25AF8f7%2527%25C2%25ACn%25C2%25B5%25C2%25B4B%25C2%25B1%25C3%25A3%25C2%25A4%250ER3%2527G%25C3%25A6Hq%25C3%25A8%25C2%25B1%2560yd%25C3%2582%250B%2506%250F%25C3%25A4H%25C2%25AF%25C2%25BE%2517%2524%25C2%25B2i%25C3%25BB%25C2%2588%25C3%259D%25C2%25B3%25C2%25B3%25C2%25B3%257C%2510%25C3%25B9%25C2%259A%2523b%25C3%25B9%25C2%2592%25C2%2597%25C3%2586%25C2%25B2%25C3%2585%25C3%25B6X%25C2%25A2%2508%25C3%2599%25C2%259E%25C3%25A0A%25C2%25AA-D%25C3%258C%2517%25C3%25A1%252B%253D%25C2%25AB6h%25C3%2587e%25C3%2593%25C2%2592%25C3%259B%25C3%258Fay%25C2%25BB%2512A%25C3%25892g%250E%255E%25C3%25A9%2503%25C2%25B8IE%25C3%25AAq%25C2%25B8%25C2%25BB%2512%2501%25C2%2587%25C3%25AE%25C3%25A1%2502%253E%25C2%2592%25C3%258C%25C2%25B6y%25C2%2592%25C3%2580d%25C3%25A1%2526E%252A%25C2%25A9%25C2%258B%250F%25C2%25871H%2520q%25C3%25A9%253E%250E%25C2%25A9%253FhC%25C3%25BF%2526%25C2%259EE%25C3%2584%251D%25C3%2581%25C2%258E%25C2%258CQ%25C3%2591w%2511s%25C3%25BC%25C3%25A2%25C2%2581%25C2%25BD%25C2%25B6%25C2%25BDP%253E%2526%25C2%2595%25C3%25A5%2503%25C3%258A%25C3%25A1%257D%25C2%259E2%25C3%2592s%251Ai%25C3%25BCg%2526%255E%25C3%25A4DGa%25C2%2590%2522%25C3%259B%25C2%25B3u%25C3%2584%25C2%2595%2514d%25C2%258B%257C%25C2%259C%25C3%25B2%25C3%2597%2514H%25C2%2591%25C3%2594%25C3%258C%2521%253EuY%25C2%259Cp%257C%25C3%25BA8%25C2%259Bj%25C2%25A7j%25C2%25AA%25C2%2587%25C2%258C%25C3%25B0%25C2%2590%25C2%25AE%253D%25C2%25BEg%251C%251B%25C3%25A4%25C3%259F%25C2%25A4%25180%25C2%259F%25C3%258BnK%251E%25C3%25B0%25C2%2598%25C2%25A5a%25C3%259CB%25C3%25A2%251Ag%25C2%258E%2512%2522%25C3%25A3%25C3%25AC%25C3%25B6W%25C3%25BE%25C2%25A2%255B%2525%25C3%25A6%25C2%2589%25C3%25A0%2519%251E%25C3%2585%25C3%259C%25C2%2593%25C3%25BDY%2514%2501%253Fi%25C2%2598%25C3%2599%25C2%25AE%2526%25C3%25ACP%2519%25C2%2593%250B%25C3%25BAm%25C2%25B1%2525%251EtV%25C2%25B9%25C3%25B0%25C2%2595Em%25C2%25BE%25C3%259F%25C2%2589%25C3%25800w%25C2%258C%25C2%2597%25C2%25B8a%25C2%259C%25C3%259A%2519LSo%251B%250E%2528.%25C3%2598%250B%2511%25C2%2582%25C2%258F%25C2%259D%25C2%25848%25C2%258BmW%25C2%25BE%25C2%259F%25C2%25A28%25C2%258B%25C3%25A9%2508%25C2%259B%25C2%25A5dKS%25C2%25B0%25C2%2583%2540%25C3%25B6sxb%25C3%2587%2522%25C2%2592%25C3%25AD%25C3%2583%25C3%2597%25C3%259C%25C3%25BAk%2503%25C2%25AFjo%25C3%258C%25C3%25B1%25C2%2595N%25C3%25A4Fj%2508iF%25C3%2598%25C2%25B5b%257F%25C3%25BA%2507%251E%257C%25C3%259C%25C3%2585%25C3%25A5%25C3%2584%2511%25C3%25A9%25C3%25A3%25C3%25BD%25C3%2585n6%25C3%25A3%25C3%2584igj%25C2%259F%25C3%25B0W%25C2%25A4%2500A%255C%25C2%259ASf%2513%253DsL%25C3%25B4%25C2%25B6%25C3%25B3d%25C2%2587%25C3%2591%253A%2516K7%25C3%259D9%25C2%259C%251Ds%25C3%25A0%25C3%25AF%25C2%2585%25C3%259B%25C2%25A1%25C3%25AF%25C2%2587A%25C2%25A2F%2504%25C2%25AEQ%2540%2560%25C2%259FSk%25C2%25AD%2525%2520%25C2%2582%25C2%25A9%25C2%2589.p%25C2%25BA%25C3%2593%25C3%2586%25C2%25BC%25C2%2594%25C3%2587%2501K%25C3%25B9n1%25C2%2580E%25C3%25BBU9l%2511%25C3%25B9%25C2%2580%25C2%25BA%25C3%25A9%250B%25C3%258E%25C2%259D-J%2514%25C2%2581%25C3%2583_%25C2%2595Pr%2522%250F%2511%25C2%25B7%2505xgsp%25C3%258Fa%250A%25C3%25A9%25C3%2588%2505%250F%25C2%258A%25C3%25B38a%253E%25C3%25B4%251B%25129s%252Cy%25C3%2598au%25C2%25B8%257C%2513%25C2%2597%25C3%25B3%25C3%259D%25C3%2582%25C2%25B3D%25C2%259A%25C2%2590%25C2%25B6%25C3%25BC%25C2%258A%25C2%25B6Z%2514%25C3%25A8%25C2%2585%25C3%258CQ%25C2%258C%253A%25C3%259C%25C3%258A%25C3%2590%25C2%25A5%252F%25C2%2598%25C2%2597%25C3%25B0%25C2%2582-%25C3%25A5%25C3%25A7%25C3%2591%25C3%2589%25C2%25AB%2516%253Ft2%2560%2501%251A%25C2%25896R%25C3%25ACx%257C%25C3%2589%25C3%25ACuG%25C2%25AA%25C3%25AA6%2516%25C3%25A0%250C%25C2%258C%255E%257F%25C3%2594%25C3%25A8%25C2%2590%25C2%2580%25C3%259BB%25C2%25A9%25C3%2581%25C2%25B3%25C3%25A4Y%25C2%2580RA%25C2%25BD%25C3%25A4F%2514%25C3%25AD0%25C3%25B ... Firebug request size limit has been reached by Firebug. ... 04%25C2%259Ad%2505%25C2%25B2%2507%25C3%25A4B%25C3%2587g%251Et%25C3%2590V%25C2%2595%2525%25C3%2597f%25C3%25A4%25C2%25BF%25C3%2589%25C2%258D%25C2%25A2%25C3%258EJ%25C3%2582%25C2%25B5%25C2%2585%25C3%2592%25C3%259F%2529%25C3%25B0%25C2%25A1%255E%25C2%2592%25C3%258A%25C3%2584%25C3%2588q%25C2%2599%253C%25C3%2594%25C2%258D%25C3%25A7%2519E%25C2%2592%25C3%25AF%25C2%25AD%25C2%2594%25C2%25AFIM%25C3%2594%25C2%2588%25C2%25AF%25C3%2588%25C3%25AF%25C2%25B8fq%25C2%25BC%2509%2523%251Bc%25C2%258C%253B%252FI%252C%25C2%25A7%25C2%25AFXf%251Bp%25C2%25A4s%25C2%25BC%251B%252F%25C3%2583%25C2%258Dx%25C3%2598%25C3%2585a9%25C3%2586%25C3%2587%25C2%25ACo%2529h%25C3%25B3l%2511%25C3%259F%25C3%2589r%25041b%25C3%25A2%255C%25C3%25ADU0%25C3%25B2%25C3%25B5Z%25C3%2593J3%25C3%2596%25C3%25A0%252A%25C3%25BD%25C3%2589%25C3%2593k%25C3%258D%25C2%25AE%25C2%25A1%25C2%2580%2528%252FIg%25C3%25892%25C2%2582%25C3%2581%2505%25C3%25BB%25C3%2592%25C3%25AA%255B%25C2%25B2%25C2%2584%25C3%25A63N%25C3%25AA%25C2%258BT%253A%250D%25C3%25A7k%2507%25C2%2594%25C2%2584%2502%25C2%25B3%25C3%2593%25C3%25B7%25C2%259E%25C2%25B9%25C2%25B5%25C2%25B8n%25C3%25AB%252C%25C3%25A0%25C2%259F%25C3%2588%25C2%25B1%2512%2509%2525qfLn%25C3%258A%25C3%25AB%25C3%258ERV%2519%2517%25C3%258A%250C%25C2%259Fg%25C3%25B2%25C2%2587r%25C3%2584v%25C2%25A3%25C3%258C%25C3%2587%2509%25C2%259E%25C2%258DnC%25C3%2586I%25C3%258D%25C3%25AAc%253E%25C2%25B21%25C3%25AE%25C3%25B1%25C3%2584E%25C3%25B0%252A%257B%2516%25265%25C2%25B9%25C2%25BE%25C2%2597Vg%2516%2527%25C2%25B2%25C2%2595-%25C3%25A7%257Dyf%25C3%25B9%25C3%25A4%25C2%25A2%2522%25C2%25AB%25C3%25B09%2527%25C3%25966%25C2%25BE%25C3%2589k%25C2%258Ai%25C3%25A7%25C3%25825%2509%2503%2511%250B31%25C3%25B5%252C%25C3%25B2%25C2%259A%25C3%25B92%25C2%2584%2513%25C3%25A6fN%250C%25C2%25B3%2504%25C3%258A3%25C2%259C%25C2%25A2%25C2%25B2a%25C3%25AD%25C2%25B21%25C3%258B%25C3%25A0%25C2%2580%251Be%250C%2540%25C2%2582%25C3%2593%25C2%259AE%2527TGsF%25C3%2581g%25C3%2596%25C2%25B1%25C2%25AA%25C2%2596%25C3%25B9%25C3%25A6%25C2%25B2%25C3%258A3%25C2%25B0e%25C3%258A%25C3%2598%25C3%259D%25C3%258Ej%253A%250B%25C3%2597%25C2%2586-%25C2%259EN%25C3%2594%251C%25C3%25823A%25C2%259C%25C2%25AD%25C2%2591%25C2%258Ay%2502%25C2%2581%25C2%258Fq%253BO%250B%25C2%2595%25C3%2591%2529%2510%2540%25C3%25A5t%252Bsz%25C2%25959%25C3%25BD%25C3%258A%25C2%259CAe%25C3%258EUe%25C3%258Eue%25C3%258E%25C2%25B02%25C3%25A7%25C2%25A62G%253E%25C2%25A4%255D%25C2%259AUM%25C2%2585N5%2519%253A%25C3%2595t%25C3%25A8T%2513%25C2%25A2SM%25C2%2589N%25C2%25BB%25C2%25A6%25C2%258B%25C3%25AD%25C2%259A%253E%25C2%25B6%25C2%25AB%25C3%25A9%25C3%2591i%255B%2514%25C2%2591%25C3%258E0%25C2%25B0X%25C3%25B3%251E%2514%25C3%259A%2521%25C2%2592%2516%25C2%25A3iHj%25C2%25AE%2502%25C2%25B9%2527%25C2%2582%257C%255D%251B%25C2%258E%2518%2525%25C3%2587%2526%25C2%25BF%25C2%25A1%25C2%2587%255Ch%25C3%25936%2505%255ECW%251C%250F6%25C3%2582%250E%2507IM%255BQ%25C2%25A2-%25C3%25AC%25C2%258D%25C3%25A7SH%25C2%25BC%2511Z%25C3%25A7%25C3%25B3%25C2%2597%2526%25C2%2598%25C3%25A6hQ%25C2%2582H%25C2%25B8vn%25C2%25A0b%25C3%258F%25C2%25BD%25C2%25BE%25C2%25BEv%2506%25C3%25BD%25C3%25B6%257C0%25C3%25AF%250Dg%25C3%25B3%25C3%25BE%25C2%25A0s5%25C2%259B%250F%25C3%25A7%25C2%25B8I%25C3%25B3%251B.%250A%25C3%258E%25C3%25A7%25C3%25A8Y%25C3%25B0%25C3%2590%255B%25C3%25BBa%25C3%25B8%25C2%2594%25C2%25AE%250Bk%25C2%258EF%25C2%25B9eo%251D-%25C2%2599%257B%25C3%259F%25C2%2599%25C2%25BF%25C2%25A6%252B%25C3%2582%25C2%2585%2503%25C3%25B4%25C2%25BB%25C2%259B%25C3%25BFP%2526%25C2%25BF%2502%25C3%25B0%25C3%25A2%250F%25C2%258F%25C3%25AF%25C3%25AE%2507%2503%25C2%25B9%2500P%25C3%25AD%2508%25C3%2587W%25C2%25B7%255D%25C2%25B6%2528.%25C2%259Cy%25C2%25A9%25C3%25A9%25C2%259B%257C%25C3%25A5%25C2%2581G%25C3%258F%25C3%2599Y%25C2%25A08z%25C3%25AE%255E%25C3%259F4dD%25C3%25A5v%25C2%25AB%257Ds%25C3%259D%25C2%25A0%25C3%258D%25C3%258E%25C2%25B8%25C2%2595%25C2%2581%25C2%25B8%25C3%2589%250E%25C3%258E%25C2%2594%25C3%2587%25C2%25AF%25C2%25B3%255C%253E%25C2%25B9%2523%25C3%2594h%25C3%25BB%2510%25C2%25AF%255Cw%25C3%2596%25C3%259F%2505%2522%25C3%25B2t%2511%25C3%25AD%2520%25C2%25B5%25C3%25BB%252A%25C3%2595%250AD%25C2%25A7%25C2%258F%255B%25C2%25B7%25C3%25B1%25C3%25A1g%25C2%2591%25C2%2586N1%25C2%2591%2526%25C2%258E%25C3%2587%250B%25007%25C2%25B2%25C2%25BE%251C%25C2%25B7%25C2%25BA%25C2%25BE5%25C2%2581KA%257D%25C3%2587%25C3%25A6%2520%25C3%25ABG%25C3%25A2k%252B%25C3%25AA8%25C3%2581%2525%2515s%25C3%259F%2514%2529O%25C3%25BDX%2526%252B%253C%25C3%25BA%25C3%25B4%25C3%25BF";
 
  window.GetQueryString = 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("&"));
  };
 
  window.getParameterByName = function(name) {
   name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
   var regexS = "[\\?&]" + name + "=([^&#]*)";
   var regex = new RegExp(regexS);
   var results = regex.exec(window.location.href);
   if (results == null) return "";
   else return decodeURIComponent(results[1].replace(/\+/g, " "));
  }
 
  // from http://jsbin.com/adali3/2/edit
  var qsArrs = function(qs) {
   var urlParams = {},
       e, d = function(s) {
     return decodeURIComponent(s).replace(/\+/g, " ");
       },
       q = qs,
       
       
       
       
       
       //window.location.search.substring(1),
       r = /([^&=]+)=?([^&]*)/g;
 
   while (e = r.exec(q)) {
    if (e[1].indexOf("[") == "-1") urlParams[d(e[1])] = d(e[2]);
    else {
     var b1 = e[1].indexOf("["),
         aN = e[1].slice(b1 + 1, e[1].indexOf("]", b1)),
         pN = d(e[1].slice(0, b1));
 
     if (typeof urlParams[pN] != "object") urlParams[d(pN)] = {}, urlParams[d(pN)].length = 0;
 
     if (aN) urlParams[d(pN)][d(aN)] = d(e[2]);
     else Array.prototype.push.call(urlParams[d(pN)], d(e[2]));
 
    }
   }
   return urlParams;
  };
  var nodeqs = {};
 
  (function(exports) {
  /*!
   * querystring
   * Copyright(c) 2010 TJ Holowaychuk <tj@vision-media.ca>
   * MIT Licensed
   */

 
   /**
    * Library version.
    */

 
   exports.version = '0.1.0';
 
   /**
    * Parse the given query `str`, returning an object.
    *
    * @param {String} str
    * @return {Object}
    * @api public
    */

 
   exports.parse = function(str) {
    if (str == undefined || str == '') return {};
 
    return String(str).split('&').reduce(function(ret, pair) {
     var pair = decodeURIComponent(pair.replace(/\+/g, ' ')),
         eql = pair.indexOf('='),
         brace = lastBraceInKey(pair),
         key = pair.substr(0, brace || eql),
         val = pair.substr(brace || eql, pair.length),
         val = val.substr(val.indexOf('=') + 1, val.length),
         obj = ret;
 
     // ?foo
     if ('' == key) key = pair, val = '';
 
     // nested
     if (~key.indexOf(']')) {
      var parts = key.split('['),
          len = parts.length,
          last = len - 1;
 
      function parse(obj, parts, parent, key) {
       var part = parts.shift();
 
       // end
       if (!part) {
        if (Array.isArray(parent[key])) {
         parent[key].push(val);
        } else if ('object' == typeof parent[key]) {
         parent[key] = val;
        } else {
         parent[key] = [parent[key], val];
        }
        // array
       } else if (']' == part) {
        obj = parent[key] = Array.isArray(parent[key]) ? parent[key] : [];
        if ('' != val) obj.push(val);
        // prop
       } else if (~part.indexOf(']')) {
        part = part.substr(0, part.length - 1);
        parse(obj[part] = obj[part] || {}, parts, obj, part);
        // key
       } else {
        parse(obj[part] = obj[part] || {}, parts, obj, part);
       }
      }
 
      parse(obj, parts);
      // optimize
     } else {
      set(obj, key, val);
     }
 
     return ret;
    }, {});
   };
 
   /**
    * Set `obj`'s `key` to `val` respecting
    * the weird and wonderful syntax of a qs,
    * where "foo=bar&foo=baz" becomes an array.
    *
    * @param {Object} obj
    * @param {String} key
    * @param {String} val
    * @api private
    */

 
   function set(obj, key, val) {
    var v = obj[key];
    if (undefined === v) {
     obj[key] = val;
    } else if (Array.isArray(v)) {
     v.push(val);
    } else {
     obj[key] = [v, val];
    }
   }
 
   /**
    * Locate last brace in `str` within the key.
    *
    * @param {String} str
    * @return {Number}
    * @api private
    */

 
   function lastBraceInKey(str) {
    var len = str.length,
        brace, c;
    for (var i = 0; i < len; ++i) {
     c = str[i];
     if (']' == c) brace = false;
     if ('[' == c) brace = true;
     if ('=' == c && !brace) return i;
    }
   }
 
  })(nodeqs);
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Split method
var qs = window.GetQueryString(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];
pending…
Regex method
var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");
pending…
node-querystring
var qs = nodeqs.parse(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];
pending…
qsArrs
var qs = qsArrs(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

1 comment

Javascript Countdown Timer commented :

very cool & good tutorial and demo, thank you very much for sharing.

Can I <a href="http://www.javascriptbank.com/submit/">share this post</a> on my JavaScript library?

Awaiting your response. Thank

Add a comment