Parse that Querystring with a JQuery Plugin

Because sometimes you need that data!

0 Comments

As a web developer, it is important to have a great toolbox! Here is a great little addition that transforms the querystring into a Javascript object. When I set out to create a search engine, written in Javascript, to crawl a predefined JSON file for my site, I quickly realized I would also need a way to parse the querystring if I wanted to link to certain search results. This lead to the handy bit of code below.

Code

(function ( $ ) {
    $.qsParameters = 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];
            }
        }
        
        return qso;
    }
}( jQuery ));

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 = $.qsParameters();

//To get only the field named "q"
var query = $.qsParameters()["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 = $.qsParameters()["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 the Gist I wrote.

- By: Last Updated:

Comments

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