JavaScript
Article
By Sam Deering

Get URL parameters using jQuery

By 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:

--ADVERTISEMENT--

$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return results[1] || 0;
    }
}
  • 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.

    • Love it. Worked like a charm.

    • Thanks

    • Joshua Mark

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

  • 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!)

  • 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?

    • 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

  • 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

  • MaaxZoom

    How about packing decode inside the function body (plus some code modification):

    $.getUrlParam = function(param){
    var results = new RegExp(‘[?&]’ + param + ‘=([^&#]*)’).exec(window.location.href);
    if (results!=null && results[1]) {
    return decodeURIComponent(results[1]);
    }
    return null;
    }

  • 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;
    }
    };

  • Ahsan Adam

    Hello I am beginner in wordpress development … I got a task of populating a textarea with a variable in url .. Because I cant use PHP in wordpress I used your tutorial but it dosent worked for me. Please can you help me. I tried using your code like following.

    $.urlParam = function(name){

    var results = new RegExp(‘[?&]’ + name + ‘=([^&#]*)’).exec(window.location.href);

    return results[1] || 0;

    }

    $(‘#hello’).val(decodeURIComponent($.urlParam(‘message’)));

  • sujeet

    Hello,
    If there is ‘&’ character in city name then how to handle it.
    example: city = jammu & kashmir
    Thank you.

  • pd

    Thanks, this was quite helpful.

  • Erhan Yaşar

    is there still anyone online can help me about the same problem and i can share?

    • Hi Erhan! You might like to post your question on the SitePoint forums: sitepoint.com/community

      • Erhan Yaşar

        Many thanks..

  • Jaime

    Great!! Thanks!!

  • Junior Drikore

    Thanks you very much

  • willymakeit

    Hey guys, I was using this and realized that the API I am using had a ‘#’ separator for the first variable so it was not found and I made this little change to fix it up:

    var results = new RegExp(‘[?&#]’ + name + ‘=([^&#]*)’).exec(window.location.href);

    This should work for # separators as well but I have not tested it.

Recommended
Sponsors
Get the latest in JavaScript, once a week, for free.