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

[contentblock id=300squaretextlink] [contentblock id=300squareimagelink]

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:

[lang=’js’]
/**
* @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);
[/lang]

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:

[lang=’js’]
/**
* @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];
};
[/lang]

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.

Khayrattee Wasseem's Picture

About Khayrattee Wasseem

PHP enthusiast | The PHP Community Fanboi | Founder of PHP Usergroup for Mauritius (#PhpMauritius) | Aspiring Entrepreneur | Ex-country Manager of a global award winning Magento Agency | Passionate about all things Wordpress & Servers

Mauritius https://wppp.io

6 comments

  1. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.