Parse that Querystring with VanillaJS

Because sometimes you need that data!

0 Comments

Parsing your querystrings with plain-old javascript has never been easier! For the developer that wants to code every line, or perhaps needs every drop of power/speed their browser can muster, VanillaJS is the winner. So here is a VanillaJS version of my querystring parser that does not require jQuery to run.

What is VanillaJS

VanillaJS is a loving name given to plain-old javascript, that’s right, the same javascript that you know and love is VanillaJS!

Code

/*
 *  querystring.js - v1.0.0
 *  Querystring utility in Javascript
 *  https://github.com/EldonMcGuinness/querystring.js
 *
 *  Made by Eldon McGuinness
 *  Under MIT License
 *
 *  Parameters:
 *  str - A string that you want the script to treat as the querystring
 *        instead of the actual page's querystring.
 */

queryString = function(str) {
    var qso = {};
    var qs = (str || document.location.search);

    // Check for an empty querystring
    if (qs == ""){
        return qso;
    }
    
    // Normalize the querystring
    qs = qs.replace(/(^\?)/,'')
    .replace(/;/g,'&');
    while (qs.indexOf("&&") != -1){
        qs = qs.replace(/&&/g,'&');
    }
    qs = qs.replace(/([\&]+$)/,'');

    // Break the querystring into parts

    qs = qs.split("&");

    // Build the querystring object
    for (var i=0; i < qs.length; i++){
        var qi = qs[i].split("=");

        qi = map(qi, function (n) {return decodeURIComponent(n)});

        if (qso[qi[0]] != undefined){

            // If a key already exists then make this an object
            if (typeof(qso[qi[0]]) == "string"){
                var temp = qso[qi[0]];
                if (qi[1] == ""){
                    qi[1] = null;
                }
                //console.log("Duplicate key: ["+qi[0]+"]["+qi[1]+"]");
                qso[qi[0]] = [];
                qso[qi[0]].push(temp);
                qso[qi[0]].push(qi[1]);

            }else if (typeof(qso[qi[0]]) == "object"){
                if (qi[1] == ""){
                    qi[1] = null;
                }                    
                //console.log("Duplicate key: ["+qi[0]+"]["+qi[1]+"]");
                qso[qi[0]].push(qi[1]);
            }
        }else{
            // If no key exists just set it as a string
            if (qi[1] == ""){
                qi[1] = null;
            }                
            //console.log("New key: ["+qi[0]+"]["+qi[1]+"]");
            qso[qi[0]] = qi[1];
        }
    }

    function map(arr, func){
        for (var i=0; i<arr.length; i++ ){
            arr[i] = func(arr[i]);
        }
        return arr;
    }
    
    return qso;
}

Usage

To get the results of the querystring you simply need to invoke the plugin. additionally, you can refer directly to the part of the object that you want.

//To copy the entire querystring object into a variable 
var queryString = querystring();

//To get only the field named "q"
var query = querystring()["q"];

//Remember, if there is more than one item with the same name, you will get an
//array that contains the responses.
//Example URL: /page.html?q=something&q=somethingelse
var query = querystring()["q"];

//query[0] yields the string "something"
//query[1] yields the string "somethingelse"

Useful Right!?

If you find this or any of my other contributions useful consider sharing them on social media.

Corrections or Changes

If you think something is not right or should be changed, feel free to comment or submit fixes on Github.

- By: Last Updated:

Comments

Small ad here
Select a size at which to preview the size