Faster and cleaner way to parse Parameters from URL in javascript/jQuery? [closed]

After playing around for a few minutes, here's what I came up with.

function parseQueryString() {
    var query = (window.location.search || '?').substr(1),
        map   = {};
    query.replace(/([^&=]+)=?([^&]*)(?:&+|$)/g, function(match, key, value) {
        (map[key] = map[key] || []).push(value);
    });
    return map;
}

Note that I'm not returning exactly the same data structure you are, but that's on purpose. Mashing an object and array together will fail if the query string has keys like "length" or "push".

This function will also work with parameters that are re-used, parameters with empty values, parameters without an equals sign, and malformed urls. If you know you won't need to parse query strings where the same key is used multiple times, you could replace line 5 with map[key] = value;.

There is not a common way of doing this because it's not a common requirement, presumably if there are parameters in the url it's usually because some element or script in the browser put them there so this information is usually (but not always as in the case of bookmarks) available elsewhere on the page. What is more common is for the server script (ruby, python, aspx, php, etx.) to embed all the parameters the script is going to need directly in the page.

For example in .Net using the Razor templating engine you might do

<script>
(function() {
  var model = @Html.Json(Model);

  ....
})
</script>

Where @Html.Json(Model) would run on the server and json-serialize the model into the model variable (which is valid javascript after all).

As for performance, this script should run at most once per page load so who cares? You would have trouble finding a way of writing it that's so bad that it would cause problems.

There are however a few somewhat minor style and logic issues. Here is how I would do something similar:

// I don't like the function name() syntax - it hides what's really going on, which is this:
var getUrlVars = function() {
    //technically i and len are initialized first due to variable hosisting anyways so Douglass Crockford recommends doing it here 
    //I personally think its ok to declare your variables lower as long as you're comfortable with the concept
    var i, len,  
        params = {}, // no idea why the previous function used an array
        hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

    //Array.length is actually a very rare instance of a calculated property, this syntax ensures it is only calculated once at
    //the beginning of looping.
    // Also Crockford recommends not using ++ on account of it being a silly construct that can lead to bad practices
    for(i = 0, len = hashes.length, len; i < len; i+=1) {
      hash = hashes[i].split('=');
      //no idea why there was a push here previously, it gets overridden by the next line
      params[hash[0]] = hash[1];
  }

  return params;
}

This line

window.location.href.slice(window.location.href.indexOf('?') + 1)

should be written as

var search = window.location.search.substr(1);

Look at what the window.location object as to offer.

The for loop should be changed to not look calculate length each iteration

var len = hashes.length
for (var i = 0; i < len; i++)

Also you should be using an object and not an array to hold the values.

This is something you shouldn't do manually and rather leave up to a reusable module. It's easy to miss some cases. Like in your example it doesn't handle items without a value correctly or correctly converts + to space. And you should definitely not use regex as it will not handle all cases correctly.

I've created a tiny reusable module which handles this correctly: https://github.com/sindresorhus/query-string

For reference, here's how it parses a query string:

function parseQueryString(str) {
    if (typeof str !== 'string') {
        return {};
    }

    str = str.trim().replace(/^\?/, '');

    if (!str) {
        return {};
    }

    return str.trim().split('&').reduce(function (ret, param) {
        var parts = param.replace(/\+/g, ' ').split('=');
        ret[parts[0]] = parts[1] === undefined ? null : decodeURIComponent(parts[1]);
        return ret;
    }, {});
};