Retreive $_GET variables in JavaScript from a URL string

In the case I had found working on a WordPress plugin yesterday, I needed to manipulate and read a URL that was given as a string by a user.

For example, https://www.google.ca/?output=search&q=cats was given and I would want to be able to retrieve what q‘s value was, or if it even existed.

Thanks to Adam Zwakenberg (@AdamZwakk) for showing me this cleaner version.

Current URL Method

Source – PaperMashup
{code type=javascript}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
{/code}

Usage

{code type=javascript}
// https://www.google.ca/?output=search&q=cats
var search_query = getUrlVars()[‘q’]; // ‘cats’
var search_value = getUrlVars()[‘search’]; // null
{/code}

URL Variable Method

{code type=javascript}
function getUrlVars( url ) {
var vars = {};
var parts = url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}

{/code}

Usage

{code type=javascript}
var url = ‘https://www.google.ca/?output=search&q=cats’;
var search_query = getUrlVars(url)[‘q’]; // ‘cats’
var search_value = getUrlVars(url)[‘search’]; // null
{/code}

16 thoughts on “Retreive $_GET variables in JavaScript from a URL string”

    1. function getUrlVars1()
      {
      var vars = [], hash;
      var hashes = window.location.href.slice(window.location.href.indexOf(‘?’) + 1).split(‘&’);
      //var hashes = window.location.href.valueOf().split(‘?’).slice(1)[0].split(‘&’);
      for(var i = 0; i < hashes.length; i++)
      {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
      }
      return vars;
      }
      function test()
      {
      var first = decodeURIComponent(getUrlVars1()["id"]);
      alert(first);
      }

    1. Not sure where you got that getUrlVars1() function from, but it’s definitely not the same as mine. When I copied your code into a fresh file, I’m immediately getting a syntax error in your var hashes line.

      I suggest using the function I have here, rather than that home-grown one, and see if that works.

  4. dear Eric
    i used the below code that you suggested:
    function test()
    {
    var url = ‘https://www.google.ca/?output=search&q=cats’;
    var search_query = getUrlVars(url)[‘q’]; // ‘cats’
    var search_value = getUrlVars(url)[‘search’]; // null
    alert(search_value);
    }
    function getUrlVars( url ) {
    var vars = {};
    var parts = url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
    });
    return vars;
    }
    same problem.

  5. i forget to mention an important thing well this html page is an html page in titnium project based on html application

    1. This alert SHOULD be undefined. If you notice, you’re alerting out the ‘search’ URL variable, which is not there, and thus undefined. If you alert search_query, it should give you the proper value. Also, the error I was getting was due do `&q` being a special character when surrounded by single quotes. Change them to double quotes to fix this. Updating my post above.

  7. If you’re on that page, just alert(window.location.href); If you want to store that url String that you passed for later use, just declare that variable outside any function, and it will be accessible in any function in the global namespace.

    1. You may need to use window.location.search as well. Do a console.log(window.location) to see all of the possibilities. I know window.location.search does not include the hired, I think it’s everything after ( and possibly including) the ?. I’ll run a test and update this post when I have time later today. On the road right now

  11. Absolutely fantastic! Best short version of how to retrieve url parameters in JavaScript I’ve seen – and I searched through heaps of other code blocks before I stumbled on this one. Thank You :)

Comments are closed.