jQuery: How to get parameters of a url?

Question

New to jQuery and I'm having trouble getting the parameters of a url that my server generates. I have a url like this:

<span class="popuptest"><a href="www.example.com/test?param1=1&param2=2">find param</a></span>

my jquery function looks like so:

$(function() {
  $('.popuptest a').live('click', function(event) {
  $.extend({
    getUrlVars: function(){
      var vars = [], hash;
      var hashes = this.href.slice(this.href.indexOf('?') + 1).split('&');
      for(var i = 0; i < hashes.length; i++)
      {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
      }
      return vars;
    },
    getUrlVar: function(name){
      return $.getUrlVars()[name];
    }
  });
  var second = getUrlVars()["param2"];
  alert(second);
  return false;
  });
});

clicking on the link should show me "2", however I get nothing... any help for a jQuery noob? thanks in advance!

I found this on a blog: http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html

@FelixKling True, but I think this is a better question than the original, which has no example URL and no code. How it got so many upvotes is a mystery. — Bill the Lizard
– Bill the Lizard, Commented Oct 10, 2011 at 11:23
@Bill: You are right... I was just thinking because one answer here just references the other question and another one basically copied the code from the accepted answer. — Felix Kling
– Felix Kling, Commented Oct 10, 2011 at 12:02

Vivek · Accepted Answer · 2011-02-22 04:26:13Z

18

You don't need jQuery for that purpose you can use the pure JavaScript:

function getParameterByName( name,href )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( href );
  if( results == null )
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

and you can call the function in this way..getParameterByName(param1,href of your link)

DEMO

answered Feb 22, 2011 at 4:26

Vivek

11k15 gold badges51 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Val Kornea Over a year ago

Of course you don't need jQuery. How do you suppose jQuery works? It uses JavaScript. The point of jQuery is convenience.

shak · Accepted Answer · 2019-07-19 20:41:33Z

small improvement, parse the url only once, return array or params:

function getURLParameters(url){

    var result = {};
    var hashIndex = url.indexOf("#");
    if (hashIndex > 0)
       url = url.substr(0, hashIndex);        
    var searchIndex = url.indexOf("?");
    if (searchIndex == -1 ) return result;
    var sPageURL = url.substring(searchIndex +1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)
    {       
        var sParameterName = sURLVariables[i].split('=');      
        result[sParameterName[0]] = sParameterName[1];
    }
    return result;
}

http://jsfiddle.net/shakhal/gXM3u/

Masoud Mustamandi · Accepted Answer · 2014-01-22 10:43:50Z

7

it's so easy, all you have to do is put the variable name that you want it from the URL into this function then it will return you the value of URL variable

function getParameterByName(name) {
 return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

answered Jan 22, 2014 at 10:43

Masoud Mustamandi

4989 silver badges15 bronze badges

Comments

Harendra Singh · Accepted Answer · 2023-04-05 11:13:13Z

4

Jquery have in build functions for get param form URL.

var url="http://example.com/?id=76dc915c-b1c2-47f6-ae63-a3ea6ce78f2a";

let searchParams = new URLSearchParams(window.location.search)

searchParams.has('id') // true

let paramId = searchParams.get('id');

edited Apr 5, 2023 at 11:13

answered Oct 29, 2021 at 10:34

Harendra Singh

3232 silver badges11 bronze badges

Comments

Xman Classical · Accepted Answer · 2013-11-20 09:36:04Z

3

function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}

answered Nov 20, 2013 at 9:36

Xman Classical

5,4861 gold badge28 silver badges26 bronze badges

Comments

johnkavanagh · Accepted Answer · 2014-04-23 10:24:36Z

Your jquery could be

$(function() {  
 $('.popuptest a').live('click', function(event) {
 $.extend({     getUrlVars: function(){
  var vars = [], hash;
  var hashes = $('.popuptest a').attr("href").slice($('.popuptest     a').attr("href").indexOf('?') + 1).split('&');
  for(var i = 0; i < hashes.length; i++)
  {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    vars[hash[0]] = hash[1];
  }
  return vars;
},
getUrlVar: function(name){
  return $.getUrlVars()[name];
}
  });
  var second = $.getUrlVars()["param2"];
  alert(second);
  return false;
  });
});

things to note:

$.getUrlVars in line - var second = $.getUrlVars()["param2"];
this.href is replaced to $('.popuptest a').attr("href")

efirvida · Accepted Answer · 2018-02-12 13:57:15Z

1

from here

$.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

answered Feb 12, 2018 at 13:57

efirvida

4,8855 gold badges50 silver badges76 bronze badges

Comments

Balaji Rajendran · Accepted Answer · 2018-12-08 01:52:39Z

So simple you can use any url and get value in Javascript.And this is Complete set of codes

<!DOCTYPE html>
<html>
<head>
<script>
var tech = getQueryVariable('filename');
function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}
alert(tech);
</script>
</head>
<body>
<p>Get parameters of a url</p>
</body>
</html>

Bazardshoxer · Accepted Answer · 2014-04-23 10:26:55Z

Using code below for some time, but recently discoverd a problem with an base64_encode string in the URL, having == at the end, like: /index.php?a=1&b=2&c=Mw==&d=4.

Using getUrlVar("c") gives me 'Mw' as result, but this should be 'Mw==', so added an extra line:

 $.extend({
  getUrlVars: function(){
   var vars = [], hash;
   var hashes = $('.popuptest a').attr("href").slice($('.popuptest a').attr("href").indexOf('?') + 1).split('&');
   for(var i = 0; i < hashes.length; i++)
   {
    hash = hashes[i].split('=');
    vars.push(hash[0]);
    if (hash.length > 2) hash[1] = hash.slice(1).join('=');
    vars[hash[0]] = hash[1];
   }
   return vars;
  },
  getUrlVar: function(name){
   return $.getUrlVars()[name];
 }
});

Collectives™ on Stack Overflow

jQuery: How to get parameters of a url?

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related