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

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}
Usage
// https://www.google.ca/?output=search&q=cats
var search_query = getUrlVars()['q']; // 'cats'
var search_value = getUrlVars()['search']; // null

URL Variable Method

function getUrlVars( url ) {
    var vars = {};
    var parts = url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}
Usage
var url = 'https://www.google.ca/?output=search&q=cats';
var search_query = getUrlVars(url)['q']; // 'cats'
var search_value = getUrlVars(url)['search']; // null

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.

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

    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.

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

  3. 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 :)

Leave a Reply

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