Javascript + Using jQuery To Find URL QueryString or URL Params – A Simple, Yet Effective Approach!

Assumptions:

  • You know the basics of javascript and/or jQuery
  • This article makes use of jQuery, but the you could just have used plain javascript since the logic behind is essentially from javascript.

At Glance => Using jQuery To Find URL Querystring or URL Params

The code in itself is intuitive and well documented. Without delay, let the code do the magic:

/**
* @author : K_Wasseem
* @URL : http://7php.com
* @license : FREE (like free air)
* @optional: I'll appreciate a link back from your site if you do refer to my article 😉
*/

(function($)
{
$.getParam = function(key)
{
//get querystring(s) without the ?
var urlParams = decodeURI( window.location.search.substring(1) ); //MySideNOTE: do not use unescape() for URI, use decodeURI()

//if no querystring, return null
if(urlParams == false | urlParams == '') return null;

//get key/value pairs
var pairs = urlParams.split("&");

var keyValue_Collection = {};
for(var value in pairs)
{
//let's get the position of the first occurrence of "=", in case value has "=" in it
var equalsignPosition = pairs[value].indexOf("=");

if (equalsignPosition == -1) //in case there's only the key, e.g: http://7php.com/?niche
keyValue_Collection[ pairs[value] ] = ''; //you could change the value to true as per your needs
else
keyValue_Collection[ pairs[value].substring(0, equalsignPosition) ] = pairs[value].substr(equalsignPosition + 1);
}
return keyValue_Collection[key];
}
})
(jQuery);

The good thing about this approach is that it does NOT use regex in its logic to find the querystring.

Finding URL Querystring With Only Javascript

As I have mentioned, the logic behind is essentially javascript. So you could simply use it without jQuery as follows:

/**
* @author : K_Wasseem
* @URL : http://7php.com
* @license : FREE (like free air)
* @optional: I'll appreciate a link back from your site if you do refer to my article 😉
*/

var getParam = function(key)
{
//get querystring(s) without the ?
var urlParams = decodeURI( window.location.search.substring(1) ); //MySideNOTE: do not use unescape() for URI, use decodeURI()

//if no querystring, return null
if(urlParams == false | urlParams == '') return null;

//get key/value pairs
var pairs = urlParams.split("&");

var keyValue_Collection = {};
for(var value in pairs)
{
//let's get the position of the first occurrence of "=", in case value has "=" in it
var equalsignPosition = pairs[value].indexOf("=");

if (equalsignPosition == -1) //in case there's only the key, e.g: http://7php.com/?niche
keyValue_Collection[ pairs[value] ] = ''; //you could change the value to true as per your needs
else
keyValue_Collection[ pairs[value].substring(0, equalsignPosition) ] = pairs[value].substr (equalsignPosition + 1);
}
return keyValue_Collection[key];
};

The Full Working Code – Download Free!

Download the whole package to try it on your pc, click here to download!
I have included two versions, one using jQuery and the other with only javascript. Have fun! 😉

Possible Improvements For The jQuery Approach

  • Adding chaining ability as jQuery offers.
  • Making it OOP
  • Modifying it to extend or offer methods to make it more flexible with added functionality

Simple Is Effective!

Being a KISS fan, I would say that my function is simple, yet effective since it does exactly what it is meant for; just retrieving query string using javascript and/or jQuery!
What about your approach? Feel free to make your suggestions and report any bugs found.

If You Appreciate What I Do Here On Seven PHP :: 7PHP, You Could Consider:

  1. Following me on Twitter | @7php
  2. LIKE-ing my FaceBook page
  3. Subscribe to my Email List - see top-right subscription box
  4. Help diffuse this interview to the PHP ecosystem - Share & Spread the word as far as you can ==> That would be a FREE way to thank me
  5. Use my DigitalOcean referral link if you plan to use it as your VPS (it starts at only $5/month btw) or if you can refer it to your friends, highly appreciated.
  6. Support via Paypal donate - my Paypal ID is w@7php.com

{I'm thankful to your response(s)!}

Valuable Feedback / Comment / Review From People Like You

  1. Thanks Dear,
    You have made fantabulous function.

    Thanks Once again

  2. Great Function, Just what i needed.
    Just thought you should know the download link is not working.
    Thanks for your hard work.

  3. @paul wood:
    thanks for letting me know, I have fixed the download links. Cheers!

  4. Awesome….thanks.

  5. Just wanted to let you know that you have a typo in your “only Javascript” code.
    On line 28 you call “subst()” but it should be “substr()”.

    Otherwise it works great. Thanks for the code!

  6. Hi JB,
    yes indeed you are right. I have corrected this typo. Thanks a lot, really appreciate!

    //Wasseem

Trackbacks

  1. Tweets that mention Javascript + Using jQuery To Find URL QueryString or URL Params – A Simple, Yet Effective Approach! « 7PHP dot COM -- Topsy.com says:

    […] This post was mentioned on Twitter by K_Wasseem. K_Wasseem said: Javascript + Using jQuery To Find URL QueryString or URL Params – A Simple, Yet Effective Approach! (http://bit.ly/cP1YCb) #php #7php […]

Speak Your Mind

*