Get URL parameters using jQuery

Sam Deering

jQuery code snippet to get the dynamic variables stored in the url as parameters and store them as JavaScript variables ready for use with your scripts. Used differently to Hash Url’s as the world turns to dynamic web apps. Thus things like Decoding URL Strings will be ever popular for years to come.

$.urlParam = function(name){
	var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
	return results[1] || 0;
}

// example.com?param1=name&param2=&id=6
$.urlParam('param1'); // name
$.urlParam('id');        // 6
$.urlParam('param2');   // null

//example params with spaces
http://www.jquery4u.com?city=Gold Coast
console.log($.urlParam('city'));  
//output: Gold%20Coast

console.log(decodeURIComponent($.urlParam('city')));  
//output: Gold Coast

This could be used for example to set the default value of a text input field:

$('#city').val(decodeURIComponent($.urlParam('city')));

Thanks to bjverde for improvements to this function:

$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return results[1] || 0;
    }
}

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://www.jontetzlaff.com Jon Tetzlaff

    Thanks for the tip. Works great!

  • bjverde

    Thanks for the tip. Works great!
    But, a little better


    $.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
    return null;
    }else{
    return results[1] || 0;
    }
    }

    • alkos333


      function getUrlVar(key){
      var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search);
      return result && result[1] || "";
      }

      I mentioned this version here: https://gist.github.com/1771618

      • jquery4u

        @alkos333 nice, thanks.

    • http://andywarthol.com/ Andrew

      Love it. Worked like a charm.

    • http://jquery4u.com/ jQuery4u

      Thanks

    • Joshua Mark

      Huge thanks. This fixes the underscore issue I was having.

  • http://code.google.com/p/orange-j/ Donovan Walker

    Pretty nice. It’s been ‘one bettered’ in orange-j 2.4.2 with two functions

    * $(‘finder, url, empty’).urlParse(‘attrName’)
    converts the parameters in a url string into an object (document anchor tag, if present is ‘#’ named attribute. Doesn’t support full-on objects yet, but does support arrays!)
    * $.urlArg(url, argName, default)
    takes a url and argument name, parses the value from the url (incl arrays!)

  • http://www.booser.com Boon

    very useful jquery function, saved my ass :D thank you

  • Pingback: jQueryでGETパラメーターを取得。 | ekkun.com

  • iwaterski

    Hi people
    While using this I get an error.

    TypeError: ‘null’ is not an object (evaluating ‘results[1]‘)

    I’ve tried a couple of the variations on in the post and it still happens.
    Any ideas how I fix this?

    • http://jquery4u.com/ jQuery4u

      Sounds like a regex no match, whats in your url, is it in this format?

      example.com?param1=name&param2=&id=6

    • Juan Manuel Villegas

      use the fix proposed above

  • Lovro

    thanks

  • http://www.facebook.com/nazali Ade Muhammad Nazali

    this is old post, but this script is work great

  • Bix

    Works well for me. Thank you. Now how do I pass on of the url params to a get function?

  • Thomas Johansen Kvael

    This should not be used. Try to write for example ?query=Lamp

    It will remove everything after L

  • Tobi

    nice, thanks!!

  • rish

    holy smokez

  • Alioso

    This has been very helpful, thanks!
    I have used this to populate a form, however I was wondering how you would use your example $(‘#city’).val(decodeURIComponent($.urlParam(‘city’))); to populate multiple fields. I can only seem to get the first one. thanks again

  • infinitizon

    Thanks guys, this is great

    I edited (bjverde’s edit in my code) so its easy to pass in href as parameter

    $.urlParam = function(url, name) {
    var results = new RegExp(‘[?&]‘ + name + ‘=([^&#]*)’).exec(url);
    if (results === null) {
    return null;
    } else {
    return results[1] || 0;
    }
    };