How can I get query string values in JavaScript?

Question

Is there a plugin-less way of retrieving query string values via jQuery (or without)?

If so, how? If not, is there a plugin which can do so?

Dejesus

I use the plugin getUrlParam described in jQuery-Plugin – getUrlParam (version 2). – Factorize

I like dojo's queryToObject. The function could easily be plucked from the framework if you're on a diet. – Fishy

A plain javascript solution without RegEx: css-tricks.com/snippets/javascript/get-url-variables – Epinephrine

Although the top solution to the question deserves its popularity because of its excellent observation that jQuery is not needed, its method of creating new regular expressions and re-parsing the query string for every parameter desired is extremely inefficient. Far more efficient (and versatile) solutions have been in existence for a long time, for example within this article reprinted here: htmlgoodies.com/beyond/javascript/article.php/11877_3755006_3/… – Longheaded

possible duplicate of JavaScript query string – Grim

Joseph, the "excellent observation that jQuery is not needed"? Of course it's not needed. Everything jQuery does, it does using JavaScript. People don't use jQuery because it does stuff that JavaScript can't do. The point of jQuery is convenience. – Fluting

Answer 1

Use URLSearchParams to get parameters from the query string.

For example:

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

Update: Jan-2022

Using Proxy() is faster than using Object.fromEntries() and better supported.

This approach comes with the caveat that you can no longer iterate over query parameters.

const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
let value = params.some_key; // "some_value"

Update: June-2021

For a specific case when you need all query params:

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

Update: Sep-2018

You can use URLSearchParams which is simple and has decent (but not complete) browser support.

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

Original

You don't need jQuery for that purpose. You can use just some pure JavaScript:

function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

Usage:

// query string: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
var bar = getParameterByName('bar'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)

NOTE: If a parameter is present several times (?foo=lorem&foo=ipsum), you will get the first value (lorem). There is no standard about this and usages vary, see for example this question: Authoritative position of duplicate HTTP GET query keys.

NOTE: The function is case-sensitive. If you prefer case-insensitive parameter name, add 'i' modifier to RegExp

NOTE: If you're getting a no-useless-escape eslint error, you can replace name = name.replace(/[\[\]]/g, '\\$&'); with name = name.replace(/[[\]]/g, '\\$&').

---

This is an update based on the new URLSearchParams specs to achieve the same result more succinctly. See answer titled "URLSearchParams" below.

Euhemerus

I notice that Object.fromEntries(urlSearchParams) yields the same result. So we don't actually need the .entries() – Postage

June-2021 and Proxy solutions don't work with SPA (Singla Page Application). SPA changes de content of the page and can even change the URL relative path (adding query strings for example). – Cronyism

How can you iterate over the values ​​dynamically, with that Proxy structure? – Cnut

Need to be careful here decodeURIComponent(results[2].replace(/\+/g, ' ')); when you get base64 string from URL. Because the Base64 string can contain the "+" character. Removing this character will corrupt the base64 string. – Destefano

@DMAVE If you want to iterate over the parameters, you need to use an iterator such as .entries, OR to enumerate all the keys yourself, which is easier than it sounds, for example this little solution. – Souvenir

@Souvenir in fact all the performance gains from "new Proxy(new URLSearchParams)" would be lost. – Cnut

@DMAVE Of course. – Souvenir

Maybe a lame, tiny detail but is there any reason you need a comma after searchParams.get(prop)? – Goering

@JeffThompson, trailing commas are allowed but not required. They make it easier for developers to add new entries to the object without having to edit any of the existing entries' lines. – Fanion

Jan-2022: if you need all values of the same parameter name as an array then use searchParams.getAll(prop). – Dotdotage

Please note that using Proxy will return a Proxy – not an Object - why e.g. hasOwnProperty does not exist - IMO a marginal performance gain (common use case scenario) should not precede expected return :) – Rato

If you're using AngularJS-routing, function getParameterByName(name, url = decodeURIComponent(window.location.href)) { since it doesn't support querystring and also since ?'s are replaced by %3F – Burwell

You are probably looking for the Sept-2018 answer. – Intestinal

Why would not use something like this: const param = new URLSearchParams(window.location.search); param.get('paramName') – Utley

Proxy is NOT more performant... when reading the code. Or debugging the weird issues that result from not having a plain old JS object. When you determine that parsing query params is a bottleneck for your application, then you can use Proxy (or maybe ask why you have millions of query params in your URL). Until then, use clear and comprehensible Object.fromEntries(). – Frederik

I have read a bit about proxy. I am no convinced why using a proxy is warranted here. If it is for caching, urlParams in your 3rd example should be adequate, no? – Stow

If anyone is curious how to get the value with the new Proxy implementation here's an example with typescript: const queryParams = new Proxy(new URLSearchParams(window.location.search), { get: (searchParams, prop) => searchParams.get(prop as string), }); // example localhost:3000?query_param_from_url=hello const queryValue = queryParams['query_param_from_url']: console.log({queryValue}) – Tolbutamide

I'm from 2024. Just benchmarked URLSearchParams against regex, and it's 1.5X slower – Mazur

Answer 2

Some of the solutions posted here are inefficient. Repeating the regular expression search every time the script needs to access a parameter is completely unnecessary, one single function to split up the parameters into an associative-array style object is enough. If you're not working with the HTML 5 History API, this is only necessary once per page load. The other suggestions here also fail to decode the URL correctly.

var urlParams;
(window.onpopstate = function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);
  
    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();

Example querystring:

?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty

Result:

 urlParams = {
    enc: " Hello ",
    i: "main",
    mode: "front",
    sid: "de8d49b78a85a322c4155015fdce22c4",
    empty: ""
}

alert(urlParams["mode"]);
// -> "front"

alert("empty" in urlParams);
// -> true

This could easily be improved upon to handle array-style query strings too. An example of this is here, but since array-style parameters aren't defined in RFC 3986 I won't pollute this answer with the source code. For those interested in a "polluted" version, look at campbeln's answer below.

Also, as pointed out in the comments, ; is a legal delimiter for key=value pairs. It would require a more complicated regex to handle ; or &, which I think is unnecessary because it's rare that ; is used and I would say even more unlikely that both would be used. If you need to support ; instead of &, just swap them in the regex.

---

If you're using a server-side preprocessing language, you might want to use its native JSON functions to do the heavy lifting for you. For example, in PHP you can write:

<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>

Much simpler!

#UPDATED

A new capability would be to retrieve repeated params as following myparam=1&myparam=2. There is not a specification, however, most of the current approaches follow the generation of an array.

myparam = ["1", "2"]

So, this is the approach to manage it:

let urlParams = {};
(window.onpopstate = function () {
    let match,
        pl = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) {
            return decodeURIComponent(s.replace(pl, " "));
        },
        query = window.location.search.substring(1);

    while (match = search.exec(query)) {
        if (decode(match[1]) in urlParams) {
            if (!Array.isArray(urlParams[decode(match[1])])) {
                urlParams[decode(match[1])] = [urlParams[decode(match[1])]];
            }
            urlParams[decode(match[1])].push(decode(match[2]));
        } else {
            urlParams[decode(match[1])] = decode(match[2]);
        }
    }
})();

Neotype

This worked like a Charm to fetch the live URL on page load every single time:-) – Blakeslee

Very nice! However, I suggest to introduce local variables let parameterKey = decode(match[1]); let parameterValue = decode(match[2]);. This makes it more obvious what is happening IMHO. – Sessoms

I used this one as fallback to the top answer, as after that this is the most complete solution – Vergara

Answer 3

ES2015 (ES6)

getQueryStringParams = query => {
    return query
        ? (/^[?#]/.test(query) ? query.slice(1) : query)
            .split('&')
            .reduce((params, param) => {
                    let [key, value] = param.split('=');
                    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                    return params;
                }, {}
            )
        : {}
};

---

Without jQuery

var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i)
    {
        var p=a[i].split('=', 2);
        if (p.length == 1)
            b[p[0]] = "";
        else
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return b;
})(window.location.search.substr(1).split('&'));

With an URL like ?topic=123&name=query+string, the following will return:

qs["topic"];    // 123
qs["name"];     // query string
qs["nothere"];  // undefined (object)

---

Google method

Tearing Google's code I found the method they use: getUrlParameters

function (b) {
    var c = typeof b === "undefined";
    if (a !== h && c) return a;
    for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) {
        var l = b[f][p]("=");
        if (l !== -1) {
            var q = b[f][I](0, l),
                l = b[f][I](l + 1),
                l = l[Ca](/\+/g, " ");
            try {
                d[q] = e(l)
            } catch (A) {}
        }
    }
    c && (a = d);
    return d
}

It is obfuscated, but it is understandable. It does not work because some variables are undefined.

They start to look for parameters on the url from ? and also from the hash #. Then for each parameter they split in the equal sign b[f][p]("=") (which looks like indexOf, they use the position of the char to get the key/value). Having it split they check whether the parameter has a value or not, if it has then they store the value of d, otherwise they just continue.

In the end the object d is returned, handling escaping and the + sign. This object is just like mine, it has the same behavior.

---

My method as a jQuery plugin

(function($) {
    $.QueryString = (function(paramsArray) {
        let params = {};

        for (let i = 0; i < paramsArray.length; ++i)
        {
            let param = paramsArray[i]
                .split('=', 2);
            
            if (param.length !== 2)
                continue;
            
            params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
        }
            
        return params;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

Usage

//Get a param
$.QueryString.param
//-or-
$.QueryString["param"]
//This outputs something like...
//"val"

//Get all params as object
$.QueryString
//This outputs something like...
//Object { param: "val", param2: "val" }

//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object

//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue&param2=val"

//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));

---

Performance test (split method against regex method) (jsPerf)

Preparation code: methods declaration

Split test code

var qs = window.GetQueryString(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];

Regex test code

var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");

Testing in Firefox 4.0 x86 on Windows Server 2008 R2 / 7 x64

• Split method: 144,780 ±2.17% fastest
• Regex method: 13,891 ±0.85% | 90% slower

Underlinen

Amasing research. I recommend you to replace "substr" with "substring" in order to avoid the deprecated warning in various editors (could be the only explanation why 8 people downvoted this method, except insanity). – Pase

Answer 4

URLSearchParams

Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ and Chrome 49+ support the URLSearchParams API:

• Chrome Announcement and details
• Opera Announcement and details
• Firefox Announcement and details

There is a google-suggested URLSearchParams polyfill for the stable versions of IE.

It is not standardized by W3C, but it is a living standard by WhatWG.

You can use it on location:

const params = new URLSearchParams(location.search);

or

const params = (new URL(location)).searchParams;

Or of course on any URL:

const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);

You can get params also using a shorthand .searchParams property on the URL object, like this:

const params = new URL('https://example.com?foo=1&bar=2').searchParams;
params.get('foo'); // "1"
params.get('bar'); // "2" 

You read/set parameters through the get(KEY), set(KEY, VALUE), append(KEY, VALUE) API. You can also iterate over all values for (let p of params) {}.

A reference implementation and a sample page are available for auditing and testing.

Ningpo

const params = new URL(location.href).searchParams; to not rely on static text for the url – Eponymous

@Eponymous in fact, as the answers shows, you can use const params = new URL(location).searchParams; – Currish

Answer 5

Improved version of Artem Barger's answer:

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

For more information on improvement see: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/

Pussyfoot

Answer 6

Just another recommendation. The plugin Purl allows to retrieve all parts of URL, including anchor, host, etc.

It can be used with or without jQuery.

Usage is very simple and cool:

var url = $.url('http://example.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://example.com/folder/dir/index.html?item=value'); // plain JS version
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'

However, as of Nov 11, 2014, Purl is no longer maintained and the author recommends using URI.js instead. The jQuery plugin is different in that it focuses on elements - for usage with strings, just use URI directly, with or without jQuery. Similar code would look as such, fuller docs here:

var url = new URI('http://example.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'

Multiform

Answer 7

tl;dr

A quick, complete solution, which handles multivalued keys and encoded characters.

// using ES5   (200 characters)
var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).push(v)})

// using ES6   (23 characters cooler)
var qd = {};
if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)})

// as a function with reduce
function getQueryParams() {
  return location.search
    ? location.search.substr(1).split`&`.reduce((qd, item) => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v); return qd}, {})
    : {}
}

Multi-lined:

var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {
    var s = item.split("="),
        k = s[0],
        v = s[1] && decodeURIComponent(s[1]); //  null-coalescing / short-circuit
    //(k in qd) ? qd[k].push(v) : qd[k] = [v]
    (qd[k] = qd[k] || []).push(v) // null-coalescing / short-circuit
})

What is all this code...
"null-coalescing", short-circuit evaluation
ES6 Destructuring assignments, Arrow functions, Template strings ####Example:

"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

> qd.a[1]    // "5"
> qd["a"][1] // "5"

---

Read more... about the Vanilla JavaScript solution.

To access different parts of a URL use location.(search|hash)

Easiest (dummy) solution

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})

• Handles empty keys correctly.
• Overrides multi-keys with last value found.

"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

Multi-valued keys

Simple key check (item in dict) ? dict.item.push(val) : dict.item = [val]

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd) ? qd[item.split("=")[0]].push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1]]})

• Now returns arrays instead.
• Access values by qd.key[index] or qd[key][index]

> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

Encoded characters?

Use decodeURIComponent() for the second or both splits.

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v]})

####Example:

"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: ["undefined"]  // decodeURIComponent(undefined) returns "undefined" !!!*
e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"]

---

# From comments **\*!!!** Please note, that `decodeURIComponent(undefined)` returns string `"undefined"`. The solution lies in a simple usage of [`&&`][5], which ensures that `decodeURIComponent()` is not called on undefined values. _(See the "complete solution" at the top.)_

v = v && decodeURIComponent(v);

If the querystring is empty (`location.search == ""`), the result is somewhat misleading `qd == {"": undefined}`. It is suggested to check the querystring before launching the parsing function likeso:

if (location.search) location.search.substr(1).split("&").forEach(...)

Souvenir

Answer 8

Roshambo on snipplr.com has a simple script to achieve this described in Get URL Parameters with jQuery | Improved. With his script you also easily get to pull out just the parameters you want.

Here's the gist:

$.urlParam = function(name, url) {
    if (!url) {
     url = window.location.href;
    }
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url);
    if (!results) {
        return undefined;
    }
    return results[1] || undefined;
}

Then just get your parameters from the query string.

So if the URL/query string was xyz.example/index.html?lang=de.

Just call var langval = $.urlParam('lang');, and you've got it.

UZBEKJON has a great blog post on this as well, Get URL parameters & values with jQuery.

Contagion

Answer 9

If you're using jQuery, you can use a library, such as jQuery BBQ: Back Button & Query Library.

...jQuery BBQ provides a full .deparam() method, along with both hash state management, and fragment / query string parse and merge utility methods.

Edit: Adding Deparam Example:

 var DeparamExample = function() {
            var params = $.deparam.querystring();

            //nameofparam is the name of a param from url
            //code below will get param if ajax refresh with hash
            if (typeof params.nameofparam == 'undefined') {
                params = jQuery.deparam.fragment(window.location.href);
            }
            
            if (typeof params.nameofparam != 'undefined') {
                var paramValue = params.nameofparam.toString();
                  
            }
        };

If you want to just use plain JavaScript, you could use...

var getParamValue = (function() {
    var params;
    var resetParams = function() {
            var query = window.location.search;
            var regex = /[?&;](.+?)=([^&;]+)/g;
            var match;

            params = {};

            if (query) {
                while (match = regex.exec(query)) {
                    params[match[1]] = decodeURIComponent(match[2]);
                }
            }    
        };

    window.addEventListener
    && window.addEventListener('popstate', resetParams);

    resetParams();

    return function(param) {
        return params.hasOwnProperty(param) ? params[param] : null;
    }

})();​

Because of the new HTML History API and specifically history.pushState() and history.replaceState(), the URL can change which will invalidate the cache of parameters and their values.

This version will update its internal cache of parameters each time the history changes.

Accompanyist

Answer 10

Just use two splits:

function get(n) {
    var half = location.search.split(n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}

I was reading all the previous and more complete answers. But I think that is the simplest and faster method. You can check in this jsPerf benchmark

To solve the problem in Rup's comment, add a conditional split by changing the first line to the two below. But absolute accuracy means it's now slower than regexp (see jsPerf).

function get(n) {
    var half = location.search.split('&' + n + '=')[1];
    if (!half) half = location.search.split('?' + n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}

So if you know you won't run into Rup's counter-case, this wins. Otherwise, regexp.

Or if you have control of the querystring and can guarantee that a value you are trying to get will never contain any URL encoded characters (having these in a value would be a bad idea) - you can use the following slightly more simplified and readable version of the 1st option:

    function getQueryStringValueByName(name) {
        var queryStringFromStartOfValue = location.search.split(name + '=')[1];
         return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;

Diabetic

Answer 11

Here's my stab at making Andy E's excellent solution into a full fledged jQuery plugin:

;(function ($) {
    $.extend({      
        getQueryString: function (name) {           
            function parseParams() {
                var params = {},
                    e,
                    a = /\+/g,  // Regex for replacing addition symbol with a space
                    r = /([^&=]+)=?([^&]*)/g,
                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
                    q = window.location.search.substring(1);

                while (e = r.exec(q))
                    params[d(e[1])] = d(e[2]);

                return params;
            }

            if (!this.queryStringParams)
                this.queryStringParams = parseParams(); 

            return this.queryStringParams[name];
        }
    });
})(jQuery);

The syntax is:

var someVar = $.getQueryString('myParam');

Best of both worlds!

Stedt

Answer 12

If you're doing more URL manipulation than simply parsing the querystring, you may find URI.js helpful. It is a library for manipulating URLs - and comes with all the bells and whistles. (Sorry for self-advertising here)

to convert your querystring into a map:

var data = URI('?foo=bar&bar=baz&foo=world').query(true);
data == {
  "foo": ["bar", "world"],
  "bar": "baz"
}

(URI.js also "fixes" bad querystrings like ?&foo&&bar=baz& to ?foo&bar=baz)

Durr

Answer 13

I like Ryan Phelan's solution. But I don't see any point of extending jQuery for that? There is no usage of jQuery functionality.

On the other hand, I like the built-in function in Google Chrome: window.location.getParameter.

So why not to use this? Okay, other browsers don't have. So let's create this function if it does not exist:

if (!window.location.getParameter ) {
  window.location.getParameter = function(key) {
    function parseParams() {
        var params = {},
            e,
            a = /\+/g,  // Regex for replacing addition symbol with a space
            r = /([^&=]+)=?([^&]*)/g,
            d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
            q = window.location.search.substring(1);

        while (e = r.exec(q))
            params[d(e[1])] = d(e[2]);

        return params;
    }

    if (!this.queryStringParams)
        this.queryStringParams = parseParams(); 

    return this.queryStringParams[key];
  };
}

This function is more or less from Ryan Phelan, but it is wrapped differently: clear name and no dependencies of other javascript libraries. More about this function on my blog.

Kamp

Answer 14

Here is a fast way to get an object similar to the PHP $_GET array:

function get_query(){
    var url = location.search;
    var qs = url.substring(url.indexOf('?') + 1).split('&');
    for(var i = 0, result = {}; i < qs.length; i++){
        qs[i] = qs[i].split('=');
        result[qs[i][0]] = decodeURIComponent(qs[i][1]);
    }
    return result;
}

Usage:

var $_GET = get_query();

For the query string x=5&y&z=hello&x=6 this returns the object:

{
  x: "6",
  y: undefined,
  z: "hello"
}

Annemarie

Answer 15

Keep it simple in plain JavaScript code:

function qs(key) {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.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[key];
}

Call it from anywhere in the JavaScript code:

var result = qs('someKey');

Immitigable

Answer 16

From the MDN:

function loadPageVar (sVar) {
  return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

alert(loadPageVar("name"));

Beige

Answer 17

These are all great answers, but I needed something a bit more robust, and thought you all might like to have what I created.

It is a simple library method that does dissection and manipulation of URL parameters. The static method has the following sub methods that can be called on the subject URL:

• getHost
• getPath
• getHash
• setHash
• getParams
• getQuery
• setParam
• getParam
• hasParam
• removeParam

Example:

URLParser(url).getParam('myparam1')

---

var url = "http://www.example.com/folder/mypage.html?myparam1=1&myparam2=2#something";

function URLParser(u){
    var path="",query="",hash="",params;
    if(u.indexOf("#") > 0){
        hash = u.substr(u.indexOf("#") + 1);
        u = u.substr(0 , u.indexOf("#"));
    }
    if(u.indexOf("?") > 0){
        path = u.substr(0 , u.indexOf("?"));
        query = u.substr(u.indexOf("?") + 1);
        params= query.split('&');
    }else
        path = u;
    return {
        getHost: function(){
            var hostexp = /\/\/([\w.-]*)/;
            var match = hostexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getPath: function(){
            var pathexp = /\/\/[\w.-]*(?:\/([^?]*))/;
            var match = pathexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getHash: function(){
            return hash;
        },
        getParams: function(){
            return params
        },
        getQuery: function(){
            return query;
        },
        setHash: function(value){
            if(query.length > 0)
                query = "?" + query;
            if(value.length > 0)
                query = query + "#" + value;
            return path + query;
        },
        setParam: function(name, value){
            if(!params){
                params= new Array();
            }
            params.push(name + '=' + value);
            for (var i = 0; i < params.length; i++) {
                if(query.length > 0)
                    query += "&";
                query += params[i];
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
        getParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return decodeURIComponent(pair[1]);
                }
            }
            console.log('Query variable %s not found', name);
        },
        hasParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return true;
                }
            }
            console.log('Query variable %s not found', name);
        },
        removeParam: function(name){
            query = "";
            if(params){
                var newparams = new Array();
                for (var i = 0;i < params.length;i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) != name)
                          newparams .push(params[i]);
                }
                params = newparams;
                for (var i = 0; i < params.length; i++) {
                    if(query.length > 0)
                        query += "&";
                    query += params[i];
                }
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
    }
}

document.write("Host: " + URLParser(url).getHost() + '<br>');
document.write("Path: " + URLParser(url).getPath() + '<br>');
document.write("Query: " + URLParser(url).getQuery() + '<br>');
document.write("Hash: " + URLParser(url).getHash() + '<br>');
document.write("Params Array: " + URLParser(url).getParams() + '<br>');
document.write("Param: " + URLParser(url).getParam('myparam1') + '<br>');
document.write("Has Param: " + URLParser(url).hasParam('myparam1') + '<br>');

document.write(url + '<br>');

// Remove the first parameter
url = URLParser(url).removeParam('myparam1');
document.write(url + ' - Remove the first parameter<br>');

// Add a third parameter
url = URLParser(url).setParam('myparam3',3);
document.write(url + ' - Add a third parameter<br>');

// Remove the second parameter
url = URLParser(url).removeParam('myparam2');
document.write(url + ' - Remove the second parameter<br>');

// Add a hash
url = URLParser(url).setHash('newhash');
document.write(url + ' - Set Hash<br>');

// Remove the last parameter
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove the last parameter<br>');

// Remove a parameter that doesn't exist
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove a parameter that doesn\"t exist<br>');

Nosepiece

Answer 18

Code golf:

var a = location.search&&location.search.substr(1).replace(/\+/gi," ").split("&");
for (var i in a) {
    var s = a[i].split("=");
    a[i]  = a[unescape(s[0])] = unescape(s[1]);
}

Display it!

for (i in a) {
    document.write(i + ":" + a[i] + "<br/>");   
};

On my Mac: test.htm?i=can&has=cheezburger displays

0:can
1:cheezburger
i:can
has:cheezburger

Incrustation

Answer 19

I use regular expressions a lot, but not for that.

It seems easier and more efficient to me to read the query string once in my application, and build an object from all the key/value pairs like:

var search = function() {
  var s = window.location.search.substr(1),
    p = s.split(/\&/), l = p.length, kv, r = {};
  if (l === 0) {return false;}
  while (l--) {
    kv = p[l].split(/\=/);
    r[kv[0]] = decodeURIComponent(kv[1] || '') || true;
  }
  return r;
}();

For a URL like http://example.com?param1=val1&param2=val2 you can get their value later in your code as search.param1 and search.param2.

Outlaw

Answer 20

Roshambo jQuery method wasn't taking care of decode URL

http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/

Just added that capability also while adding in the return statement

return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;

Now you can find the updated gist:

$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
}

Ostensory

Answer 21

function GET() {
        var data = [];
        for(x = 0; x < arguments.length; ++x)
            data.push(location.href.match(new RegExp("/\?".concat(arguments[x],"=","([^\n&]*)")))[1])
                return data;
    }


example:
data = GET("id","name","foo");
query string : ?id=3&name=jet&foo=b
returns:
    data[0] // 3
    data[1] // jet
    data[2] // b
or
    alert(GET("id")[0]) // return 3

Momentum

Answer 22

Here's my edit to this excellent answer - with added ability to parse query strings with keys without values.

var url = 'http://sb.com/reg/step1?param';
var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i) {
        var p=a[i].split('=', 2);
        if (p[1]) p[1] = decodeURIComponent(p[1].replace(/\+/g, " "));
        b[p[0]] = p[1];
    }
    return b;
})((url.split('?'))[1].split('&'));

IMPORTANT! The parameter for that function in the last line is different. It's just an example of how one can pass an arbitrary URL to it. You can use last line from Bruno's answer to parse the current URL.

So what exactly changed? With url http://sb.com/reg/step1?param= results will be same. But with url http://sb.com/reg/step1?param Bruno's solution returns an object without keys, while mine returns an object with key param and undefined value.

Lifton

Answer 23

I like this one (taken from jquery-howto.blogspot.co.uk):

// get an array with all querystring values
// example: var valor = getUrlVars()["valor"];
function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.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;
}

Works great for me.

Grouch

Answer 24

Here's an extended version of Andy E's linked "Handle array-style query strings"-version. Fixed a bug (?key=1&key[]=2&key[]=3; 1 is lost and replaced with [2,3]), made a few minor performance improvements (re-decoding of values, recalculating "[" position, etc.) and added a number of improvements (functionalized, support for ?key=1&key=2, support for ; delimiters). I left the variables annoyingly short, but added comments galore to make them readable (oh, and I reused v within the local functions, sorry if that is confusing ;).

It will handle the following querystring...

?test=Hello&person=neek&person[]=jeff&person[]=jim&person[extra]=john&test3&nocache=1398914891264

...making it into an object that looks like...

{
    "test": "Hello",
    "person": {
        "0": "neek",
        "1": "jeff",
        "2": "jim",
        "length": 3,
        "extra": "john"
    },
    "test3": "",
    "nocache": "1398914891264"
}

As you can see above, this version handles some measure of "malformed" arrays, i.e. - person=neek&person[]=jeff&person[]=jim or person=neek&person=jeff&person=jim as the key is identifiable and valid (at least in dotNet's NameValueCollection.Add):

If the specified key already exists in the target NameValueCollection instance, the specified value is added to the existing comma-separated list of values in the form "value1,value2,value3".

It seems the jury is somewhat out on repeated keys as there is no spec. In this case, multiple keys are stored as an (fake)array. But do note that I do not process values based on commas into arrays.

The code:

getQueryStringKey = function(key) {
    return getQueryStringAsObject()[key];
};


getQueryStringAsObject = function() {
    var b, cv, e, k, ma, sk, v, r = {},
        d = function (v) { return decodeURIComponent(v).replace(/\+/g, " "); }, //# d(ecode) the v(alue)
        q = window.location.search.substring(1), //# suggested: q = decodeURIComponent(window.location.search.substring(1)),
        s = /([^&;=]+)=?([^&;]*)/g //# original regex that does not allow for ; as a delimiter:   /([^&=]+)=?([^&]*)/g
    ;

    //# ma(make array) out of the v(alue)
    ma = function(v) {
        //# If the passed v(alue) hasn't been setup as an object
        if (typeof v != "object") {
            //# Grab the cv(current value) then setup the v(alue) as an object
            cv = v;
            v = {};
            v.length = 0;

            //# If there was a cv(current value), .push it into the new v(alue)'s array
            //#     NOTE: This may or may not be 100% logical to do... but it's better than loosing the original value
            if (cv) { Array.prototype.push.call(v, cv); }
        }
        return v;
    };

    //# While we still have key-value e(ntries) from the q(uerystring) via the s(earch regex)...
    while (e = s.exec(q)) { //# while((e = s.exec(q)) !== null) {
        //# Collect the open b(racket) location (if any) then set the d(ecoded) v(alue) from the above split key-value e(ntry) 
        b = e[1].indexOf("[");
        v = d(e[2]);

        //# As long as this is NOT a hash[]-style key-value e(ntry)
        if (b < 0) { //# b == "-1"
            //# d(ecode) the simple k(ey)
            k = d(e[1]);

            //# If the k(ey) already exists
            if (r[k]) {
                //# ma(make array) out of the k(ey) then .push the v(alue) into the k(ey)'s array in the r(eturn value)
                r[k] = ma(r[k]);
                Array.prototype.push.call(r[k], v);
            }
            //# Else this is a new k(ey), so just add the k(ey)/v(alue) into the r(eturn value)
            else {
                r[k] = v;
            }
        }
        //# Else we've got ourselves a hash[]-style key-value e(ntry) 
        else {
            //# Collect the d(ecoded) k(ey) and the d(ecoded) sk(sub-key) based on the b(racket) locations
            k = d(e[1].slice(0, b));
            sk = d(e[1].slice(b + 1, e[1].indexOf("]", b)));

            //# ma(make array) out of the k(ey) 
            r[k] = ma(r[k]);

            //# If we have a sk(sub-key), plug the v(alue) into it
            if (sk) { r[k][sk] = v; }
            //# Else .push the v(alue) into the k(ey)'s array
            else { Array.prototype.push.call(r[k], v); }
        }
    }

    //# Return the r(eturn value)
    return r;
};

Sheaff

For getting the query string values you can use this "GetParameterValues" function. In this you just have to pass the query stirng parameter name and it'll return you the value $(document).ready(function () { var bid = GetParameterValues('token'); }); function GetParameterValues(param) { var url = decodeURIComponent(window.location.href); url = url.slice(url.indexOf('?') + 1).split('&'); for (var i = 0; i < url.length; i++) { var urlparam = url[i].split('='); if (urlparam[0] == param) { return urlparam[1]; } } – Ignorance

I've been using this for a while now, and it's been great so far. Except for handling urlencoded arrays. Using q = decodeURIComponent(window.location.search.substring(1)), helps it do that too. – Seriocomic

for me this went on an endless loop if there were no query params :( – Splashdown

Answer 25

I needed an object from the query string, and I hate lots of code. It may not be the most robust in the universe, but it's just a few lines of code.

var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
    q[i.split('=')[0]]=i.split('=')[1];
});

A URL like this.htm?hello=world&foo=bar will create:

{hello:'world', foo:'bar'}

Dessertspoon

Neat. According to Mozilla, though, forEach doesn't work on IE7 or 8 and I suspect that'll fall over if there's no query string at all. One minimal improvement that would cover more cases would be to decodeURIComponent the value as you store it - and arguably the key as well, but you're less likely to use odd strings in that. – Lumberjack

Nice and simple. Doesn't handle array parameters nor ?a&b&c but this is really very readable (and incidentally similar to my first idea). Also the split is redundant but I've got bigger performance fish to fry than splitting a 10 character string twice. – Orlon

when querystring is "?hello=world&one=a=b&two=2" then when you grab the value of 'one' you only get the part before the first '=' in the value. its value shud be 'a=b' but you only get 'a' because you split 'one=a=b' on '='. this is simply buggy. :(( – Caprification

Answer 26

This is a function I created a while back and I'm quite happy with. It is not case sensitive - which is handy. Also, if the requested QS doesn't exist, it just returns an empty string.

I use a compressed version of this. I'm posting uncompressed for the novice types to better explain what's going on.

I'm sure this could be optimized or done differently to work faster, but it's always worked great for what I need.

Enjoy.

function getQSP(sName, sURL) {
    var theItmToRtn = "";
    var theSrchStrg = location.search;
    if (sURL) theSrchStrg = sURL;
    var sOrig = theSrchStrg;
    theSrchStrg = theSrchStrg.toUpperCase();
    sName = sName.toUpperCase();
    theSrchStrg = theSrchStrg.replace("?", "&") theSrchStrg = theSrchStrg + "&";
    var theSrchToken = "&" + sName + "=";
    if (theSrchStrg.indexOf(theSrchToken) != -1) {
        var theSrchTokenLth = theSrchToken.length;
        var theSrchTokenLocStart = theSrchStrg.indexOf(theSrchToken) + theSrchTokenLth;
        var theLocOfNextAndSign = theSrchStrg.indexOf("&", theSrchTokenLocStart);
        theItmToRtn = unescape(sOrig.substring(theSrchTokenLocStart, theLocOfNextAndSign));
    }
    return unescape(theItmToRtn);
}

Islington

Also, better to go for decodeURI() or decodeURIComponent() instead of unescape(). developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Garvey

Answer 27

function GetQueryStringParams(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');

    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}​

And this is how you can use this function assuming the URL is

http://example.com/?stringtext=jquery&stringword=jquerybyexample

var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');

Rheotropism

There's a few implementations of this approach here already. At the very least you need to decodeUriComponent() the result values. This might also misbehave if you don't specify a value, e.g. ?stringtext&stringword=foo. – Lumberjack

Answer 28

If you are using Browserify, you can use the url module from Node.js:

var url = require('url');

url.parse('http://example.com/?bob=123', true).query;

// returns { "bob": "123" }

Further reading: URL Node.js v0.12.2 Manual & Documentation

EDIT: You can use URL interface, its quite widely adopted in almost all the new browser and if the code is going to run on an old browser you can use a polyfill like this one. Here's a code example on how to use URL interface to get query parameters (aka search parameters)

const url = new URL('http://example.com/?bob=123');
url.searchParams.get('bob'); 

You can also use URLSearchParams for it, here's an example from MDN to do it with URLSearchParams:

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

Furring

The documentation for the url module's API is here: nodejs.org/api/url.html – Melloney

This is nice for nw.js development. Browserify isn't even needed as most node modules work as is in a nw.js window. I've tested this code and works like a charm without any modification. – Eusebiaeusebio

OHH this is awesome! URLSearchParams works perfect. Many thanks! – Precede

should probably be the best voted, no hassle with custom functions and additional libraries. It also seems to be mostly adopted by the browsers 2019. – Salted

Answer 29

We've just released arg.js, a project aimed at solving this problem once and for all. It's traditionally been so difficult but now you can do:

var name = Arg.get("name");

or getting the whole lot:

var params = Arg.all();

and if you care about the difference between ?query=true and #hash=true then you can use the Arg.query() and Arg.hash() methods.

Quimby

you saved me man.. arg.js is the solution none of the solutions is getting the values from # in IE 8..:( any one searching for IE8 # get from request this is the solution.. – Undis

Answer 30

The problem with the top answer on that question is that it's not-supported parameters placed after #, but sometimes it's needed to get this value also.

I modified the answer to let it parse a full query string with a hash sign also:

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

Straub

That's interesting if you need it but there's no standard for the format of the hash part AFAIK so it's not fair to call that out as a weakness of the other answer. – Lumberjack

Yes, I know. But in my app i integrate 3rd party js navigation, which have some parameters after hash sign. – Straub

For example, in the Google search page, the searching query is followed by the hash sign '#'. – Soredium

Answer 31

See it in Action: https://codepen.io/ajorpheus/pen/XWyWWNQ

---

http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash

• Regular key/value pair (?param=value)
• Keys w/o value (?param : no equal sign or value)
• Keys w/ empty value (?param= : equal sign, but no value to right of equal sign)
• Repeated Keys (?param=1&param=2)
• Removes Empty Keys (?&& : no key or value)

###Code:

-

    var queryString = window.location.search || '';
    var keyValPairs = [];
    var params      = {};
    queryString     = queryString.substr(1);

    if (queryString.length)
    {
       keyValPairs = queryString.split('&');
       for (pairNum in keyValPairs)
       {
          var key = keyValPairs[pairNum].split('=')[0];
          if (!key.length) continue;
          if (typeof params[key] === 'undefined')
             params[key] = [];
          params[key].push(keyValPairs[pairNum].split('=')[1]);
       }
    }

###How to Call:

-

    params['key'];  // returns an array of values (1..n)

###Output:

-

    key            ["value"]
    keyemptyvalue  [""]
    keynovalue     [undefined, "nowhasvalue"]

Qumran

Answer 32

This one works fine. Regular expressions in some of the other answers introduce unnecessary overhead.

function getQuerystring(key) {
    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] == key) {
            return pair[1];
        }
    }
}

taken from here

Evyn

You probably at least want to call decodeUriComponent on the pair[1] before you return it, if not replace pluses with spaces first as in all the other solutions here. Some of the other solutions also prefer a limit of 2 parts on the split = to be more lenient in accepting input. – Lumberjack

@Lumberjack you are right...actually in my code it'll always be a number rather than any special characters, so missed ... – Evyn

Thanks for it! It's the only method supported by the Kindle's Experimental Browser. Freak project here! :·) – Imbricate

Answer 33

I developed a small library using techniques listed here to create an easy to use, drop-in solution to anyones troubles; It can be found here:

https://github.com/Nijikokun/query-js

Usage

Fetching specific parameter/key:

query.get('param');

Using the builder to fetch the entire object:

var storage = query.build();
console.log(storage.param);

and tons more... check the github link for more examples.

Features

1. Caching on both decoding and parameters
2. Supports hash query strings #hello?page=3
3. Supports passing custom queries
4. Supports Array / Object Parameters user[]="jim"&user[]="bob"
5. Supports empty management &&
6. Supports declaration parameters without values name&hello="world"
7. Supports repeated parameters param=1&param=2
8. Clean, compact, and readable source 4kb
9. AMD, Require, Node support

Berkshire

Answer 34

One-liner to get the query:

var value = location.search.match(new RegExp(key + "=(.*?)($|\&)", "i"))[1];

Cummerbund

Triggers error if the key doesn't exist, try this maybe? (location.search.match(new RegExp('kiosk_modeasdf' + "=(.*?)($|\&)", "i")) || [])[1] – Lachrymator

@Brad, of course it's undefined, since that's the key you're looking for. if your query is?hello=world, var value = location.search.match(new RegExp("hello" + "=(.*?)($|\&)", "i"))[1]; will return "world" – Dessertspoon

@BradKoch I found your solution this best, especially with a short circuit to an empty string (window.location.search.match(new RegExp('kiosk_modeasdf' + "=(.*?)($|\&)", "i")) || [])[1] || ''; – Hunker

i think you forgot testing for key starting with either '?' or '&' like: var result = location.search.match(new RegExp("[\?\&]" + key + "=(.*?)($|\&)", "i")); – Wacky

Answer 35

A very lightweight jQuery method:

var qs = window.location.search.replace('?','').split('&'),
    request = {};
$.each(qs, function(i,v) {
    var initial, pair = v.split('=');
    if(initial = request[pair[0]]){
        if(!$.isArray(initial)) {
            request[pair[0]] = [initial]
        }
        request[pair[0]].push(pair[1]);
    } else {
        request[pair[0]] = pair[1];
    }
    return;
});
console.log(request);

And to alert, for example ?q

alert(request.q)

Magnetomotive

Neat. There's a few answers in the same vein already - iterating over a split - albeit none using jQuery's each, and I don't think any of them are perfect yet either. I don't understand the return in your closure though, and I think you need to decodeUriComponent the two pair[] values as you read them. – Lumberjack

yea having the decodeUriComponent is def best practice- i just kinda wrote that on the fly. As for the return... i just stay in the habit of returning something. totally not necessary – Magnetomotive

Answer 36

I would rather use split() instead of Regex for this operation:

function getUrlParams() {
    var result = {};
    var params = (window.location.search.split('?')[1] || '').split('&');
    for(var param in params) {
        if (params.hasOwnProperty(param)) {
            var paramParts = params[param].split('=');
            result[paramParts[0]] = decodeURIComponent(paramParts[1] || "");
        }
    }
    return result;
}

Upali

I wasn't wanting to use Regex and went with this solution. I find it works rather nicely. Thanks! – Weanling

Answer 37

Here is my version of query string parsing code on GitHub.

It's "prefixed" with jquery.*, but the parsing function itself don't use jQuery. It's pretty fast, but still open for few simple performance optimizations.

Also it supports list & hash-tables encoding in the URL, like:

arr[]=10&arr[]=20&arr[]=100

or

hash[key1]=hello&hash[key2]=moto&a=How%20are%20you

---

jQuery.toQueryParams = function(str, separator) {
    separator = separator || '&'
    var obj = {}
    if (str.length == 0)
        return obj
    var c = str.substr(0,1)
    var s = c=='?' || c=='#'  ? str.substr(1) : str; 

    var a = s.split(separator)
    for (var i=0; i<a.length; i++) {
        var p = a[i].indexOf('=')
        if (p < 0) {
            obj[a[i]] = ''
            continue
        }
        var k = decodeURIComponent(a[i].substr(0,p)),
            v = decodeURIComponent(a[i].substr(p+1))

        var bps = k.indexOf('[')
        if (bps < 0) {
            obj[k] = v
            continue;
        } 

        var bpe = k.substr(bps+1).indexOf(']')
        if (bpe < 0) {
            obj[k] = v
            continue;
        }

        var bpv = k.substr(bps+1, bps+bpe-1)
        var k = k.substr(0,bps)
        if (bpv.length <= 0) {
            if (typeof(obj[k]) != 'object') obj[k] = []
            obj[k].push(v)
        } else {
            if (typeof(obj[k]) != 'object') obj[k] = {}
            obj[k][bpv] = v
        }
    }
    return obj;

}

Hardnett

nice but doesnt deal with the case filters[topic][]=list – Werth

Hey, how to use the above code to get value by Key?? I want to get city values from this URL... abc.xyzl/urlpart1/… – Chronaxie

Answer 38

Here's what I'm using:

/**
 * Examples:
 * getUrlParams()['myparam']    // url defaults to the current page
 * getUrlParams(url)['myparam'] // url can be just a query string
 *
 * Results of calling `getUrlParams(url)['myparam']` with various urls:
 * example.com                               (undefined)
 * example.com?                              (undefined)
 * example.com?myparam                       (empty string)
 * example.com?myparam=                      (empty string)
 * example.com?myparam=0                     (the string '0')
 * example.com?myparam=0&myparam=override    (the string 'override')
 *
 * Origin: https://mcmap.net/q/24471/-how-can-i-get-query-string-values-in-javascript
 */
function getUrlParams (url) {
    var urlParams = {} // return value
    var queryString = getQueryString()
    if (queryString) {
        var keyValuePairs = queryString.split('&')
        for (var i = 0; i < keyValuePairs.length; i++) {
            var keyValuePair = keyValuePairs[i].split('=')
            var paramName = keyValuePair[0]
            var paramValue = keyValuePair[1] || ''
            urlParams[paramName] = decodeURIComponent(paramValue.replace(/\+/g, ' '))
        }
    }
    return urlParams // functions below
    function getQueryString () {
        var reducedUrl = url || window.location.search
        reducedUrl = reducedUrl.split('#')[0] // Discard fragment identifier.
        var queryString = reducedUrl.split('?')[1]
        if (!queryString) {
            if (reducedUrl.search('=') !== false) { // URL is a query string.
                queryString = reducedUrl
            }
        }
        return queryString
    } // getQueryString
} // getUrlParams

Returning 'override' rather than '0' in the last case makes it consistent with PHP. Works in IE7.

Banerjee

That's because everyone seems to have different requirements for handling keys without values or handling duplicated keys by building arrays of values, etc. There are plenty of split answers already but I don't see one that does exactly the same as this one, true. (FWIW I think paramName needs to be decodeURIComponented too technically, though I doubt anyone would use non-trivial params.) – Lumberjack

Parameter names should never need decoding. – Fluting

Why not? HTML 5 doesn't restrict the character set for input control names, nor is there any guarantee that they come from HTML anyway. I can't see why there would be a restriction to printable characters. – Lumberjack

The solution is good, but why no semicolon at the end of statements? – Armure

@Armure Because there is no reason to have them. Most people always include them just because they've always seen other people include them and because other languages require them; often they are wrongly regarded as required in JavaScript as well, which sometimes causes baffling problems. Doing things for no reason is generally misleading; JavaScript is not C++ or PHP. Look up defensive semicolon. – Fluting

Answer 39

For those who wants a short method (with limitations):

location.search.split('myParameter=')[1]

Blancheblanchette

That's not enough for the general case: it assumes 1) that you're only interested in a single parameter 2) that it's guaranteed to be the last parameter in the line (i.e. you can guarantee that all browsers will put it last, or it's the only param on the page, and that you're not going to e.g. put the URL in an RSS feed aggregator where it might get utm parameters added) and 3) that there are no characters in the value that can be escaped for transmission, e.g. spaces or many symbols. – Lumberjack

There's no 1 size fits all methods. If you have a perfect solution in a one-short-liner, I'll be all eyes and ears to check that out. Above is a quick solution, not for general case, but for coders who want a light weight and quick solution to static implementations. In any case, thanks for your comment. – Blancheblanchette

(location.search.split('myParameter=')[1]).split('&')[0] ; this gives you the same result in case of multiple parameters. Still useful only for static implementations. – Hyacinthia

Answer 40

Get all querystring parameters including checkbox values (arrays).

Considering the correct & normal use of GET parameters, the things I see it's missing, on most functions, is the support for arrays and removing the hash data.

So I wrote this function:

function qs(a){
 if(!a)return {};
 a=a.split('#')[0].split('&');
 var b=a.length,c={},d,k,v;
 while(b--){
  d=a[b].split('=');
  k=d[0].replace('[]',''),v=decodeURIComponent(d[1]||'');
  c[k]?typeof c[k]==='string'?(c[k]=[v,c[k]]):(c[k].unshift(v)):c[k]=v;
 }
 return c
}

Using shorthand operators & while-- loop, the performance should be very good to.

Support:

1. Empty values (key= / key)
2. Key value (key=value)
3. Arrays (key[]=value)
4. Hash (the hash tag is split out)

Notes:

It does not support object arrays (key[key]=value)

If the space is + it remains a +.

Add .replace(/\+/g, " ") if you need.

Usage:

qs('array[]=1&array[]=2&key=value&empty=&empty2#hash')

Return:

{
    "empty": "",
    "key": "value",
    "array": [
        "1",
        "2"
    ]
}

Demo:

http://jsfiddle.net/ZQMrt/1/

Info

If you don't understand something or you can't read the function just ask. I'm happy to explain what I did here.

If you think the function is unreadable and unmaintainable I'm happy to rewrite the function for you, but consider that shorthand & bitwise operators are always faster than a standard syntax (maybe read about shorthands and bitwise operators in the ECMA-262 book or use your favorite search engine). Rewriting the code in a standard readable syntax means performance loss.

Patin

Very neat, though I find it hard to believe that writing it pre-minified actually helps anything but the first parse, or helps in general if people are going to minify their production code anyway. Most of the functions here don't need to strip the hash-part because they start with location.search which doesn't contain it. I'm also not clear what you mean "bitwise operators" - you're using empty-or-undefined-is-false in a couple of places which is as close as you get but there's no bit manipulation here. – Lumberjack

If you use arrays for more than checkbox values, add: if ( v.charAt(0) == '[' ) { v = v.replace('[', '["').replace(']', '"]').replace(',', '","'); v = JSON && JSON.parse(v) || $.parseJSON(v); } before "c[k]?typeof ..." – Kingfisher

I need one that supports object arrays – Werth

Answer 41

function getUrlVar(key){
    var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search); 
    return result && unescape(result[1]) || ""; 
}

https://gist.github.com/1771618

Nobel

Answer 42

Try this:

String.prototype.getValueByKey = function(k){
    var p = new RegExp('\\b'+k+'\\b','gi');
    return this.search(p) != -1 ? decodeURIComponent(this.substr(this.search(p)+k.length+1).substr(0,this.substr(this.search(p)+k.length+1).search(/(&|;|$)/))) : "";
};

Then call it like so:

if(location.search != "") location.search.getValueByKey("id");

You can use this for cookies also:

if(navigator.cookieEnabled) document.cookie.getValueByKey("username");

This only works for strings that have key=value[&|;|$]... will not work on objects/arrays.

If you don't want to use String.prototype... move it to a function and pass the string as an argument

Ceramic

Answer 43

The following code will create an object which has two methods:

1. isKeyExist: Check if a particular parameter exist
2. getValue: Get the value of a particular parameter.

 

var QSParam = new function() {
       var qsParm = {};
       var query = window.location.search.substring(1);
       var params = query.split('&');
       for (var i = 0; i < params.length; i++) {
           var pos = params[i].indexOf('=');
           if (pos > 0) {
               var key = params[i].substring(0, pos);
               var val = params[i].substring(pos + 1);
               qsParm[key] = val;
           }
       }
       this.isKeyExist = function(query){
           if(qsParm[query]){
               return true;
           }
           else{
              return false;
           }
       };
       this.getValue = function(query){
           if(qsParm[query])
           {
               return qsParm[query];
           }
           throw "URL does not contain query "+ query;
       }
};

Cummerbund

Answer 44

I used this code (JavaScript) to get the what is passed through the URL:

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

Then to assign the value to a variable, you only have to specify which parameter you want to get, ie if the URL is example.com/?I=1&p=2&f=3

You can do this to get the values:

var getI = getUrlVars()["I"];
var getP = getUrlVars()["p"];
var getF = getUrlVars()["f"];

then the values would be:

getI = 1, getP = 2 and getF = 3

Hedelman

That's neat, although it's missing decodeURIComponent on the key and the value and you probably don't need the i flag on the regexp (not that that really matters). – Lumberjack

but what if you have example.com/3 (MVC routing) – Exclaim

Answer 45

Here's my own take on this. This first function decodes a URL string into an object of name/value pairs:

url_args_decode = function (url) {
  var args_enc, el, i, nameval, ret;
  ret = {};
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  // strip off initial ? on search and split
  args_enc = el.search.substring(1).split('&');
  for (i = 0; i < args_enc.length; i++) {
    // convert + into space, split on =, and then decode 
    args_enc[i].replace(/\+/g, ' ');
    nameval = args_enc[i].split('=', 2);
    ret[decodeURIComponent(nameval[0])]=decodeURIComponent(nameval[1]);
  }
  return ret;
};

And as an added bonus, if you change some of the args, you can use this second function to put the array of args back into the URL string:

url_args_replace = function (url, args) {
  var args_enc, el, name;
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  args_enc = [];
  // encode args to go into url
  for (name in args) {
    if (args.hasOwnProperty(name)) {
      name = encodeURIComponent(name);
      args[name] = encodeURIComponent(args[name]);
      args_enc.push(name + '=' + args[name]);
    }
  }
  if (args_enc.length > 0) {
    el.search = '?' + args_enc.join('&');
  } else {
    el.search = '';
  }
  return el.href;
};

Expectation

If your anyway using the jQuery, Then the later method (url_args_replace) can be used via $.param() – Magnet

Why do you use document.createElement("a") ? – Overcasting

@Overcasting to create the element in the browser engine, which will parse a url for you and provide search and href methods for interacting with the url string. – Expectation

Answer 46

I did a small URL library for my needs here: https://github.com/Mikhus/jsurl

It's a more common way of manipulating the URLs in JavaScript. Meanwhile it's really lightweight (minified and gzipped < 1 KB) and has a very simple and clean API. And it does not need any other library to work.

Regarding the initial question, it's very simple to do:

var u = new Url; // Current document URL
// or
var u = new Url('http://user:[email protected]:8080/some/path?foo=bar&bar=baz#anchor');

// Looking for query string parameters
alert( u.query.bar);
alert( u.query.foo);

// Modifying query string parameters
u.query.foo = 'bla';
u.query.woo = ['hi', 'hey']

alert(u.query.foo);
alert(u.query.woo);
alert(u);

Energumen

That's interesting. Why decode the value manually? You'll also limited in the top character code you can accept as UTF-8, although I realise you're unlikely to ever hit that in practice. – Lumberjack

Why decoding in that way explained here: unixpapa.com/js/querystring.html Actually, I've took the code for that idea from there, what is stated in a top-level comment at my script – Energumen

also doesnt't support object arrays like filters[topic][]=list – Werth

Answer 47

This function converts the querystring to a JSON-like object, it also handles value-less and multi-value parameters:

"use strict";
function getQuerystringData(name) {
    var data = { };
    var parameters = window.location.search.substring(1).split("&");
    for (var i = 0, j = parameters.length; i < j; i++) {
        var parameter = parameters[i].split("=");
        var parameterName = decodeURIComponent(parameter[0]);
        var parameterValue = typeof parameter[1] === "undefined" ? parameter[1] : decodeURIComponent(parameter[1]);
        var dataType = typeof data[parameterName];
        if (dataType === "undefined") {
            data[parameterName] = parameterValue;
        } else if (dataType === "array") {
            data[parameterName].push(parameterValue);
        } else {
            data[parameterName] = [data[parameterName]];
            data[parameterName].push(parameterValue);
        }
    }
    return typeof name === "string" ? data[name] : data;
}

We perform a check for undefined on parameter[1] because decodeURIComponent returns the string "undefined" if the variable is undefined, and that's wrong.

Usage:

"use strict";
var data = getQuerystringData();
var parameterValue = getQuerystringData("parameterName");

Gothic

Answer 48

The following function returns an object version of your queryString. You can simply write obj.key1 and obj.key2 to access values of key1 and key2 in parameter.

function getQueryStringObject()
{
    var querystring = document.location.search.replace('?','').split( '&' );
    var objQueryString={};
    var key="",val="";
    if(typeof querystring == 'undefined')
    {
        return (typeof querystring);
    }
    for(i=0;i<querystring.length;i++)
    {
        key=querystring[i].split("=")[0];
        val=querystring[i].split("=")[1];
        objQueryString[key] = val;
    }
    return objQueryString;
}

And to use this function you can write

var obj= getQueryStringObject();
alert(obj.key1);

Changsha

Answer 49

If you have Underscore.js or lodash, a quick and dirty way to get this done is:

_.object(window.location.search.slice(1).split('&').map(function (val) { return val.split('='); }));

Odelle

Neat. Compared to the top split-based answer though you're missing handling of +s and the decodeURIComponent calls, but for simple values this will be enough. – Lumberjack

Yeah, it's really just meant for grabbing simple alphanumeric tokens. In a current project, it's all I needed, so I didn't really want a hulking function. – Odelle

this is what I use to make a key value object of the query parameters: _.chain(document.location.search.slice(1).split('&')).invoke('split', '=').object().value() – Bihari

Answer 50

I took this answer and added support for optionally passing the URL in as a parameter; falls back to window.location.search. Obviously this is useful for getting the query string parameters from URLs that are not the current page:

(function($, undef) {
  $.QueryString = function(url) {
    var pairs, qs = null, index, map = {};
    if(url == undef){
      qs = window.location.search.substr(1);
    }else{
      index = url.indexOf('?');
      if(index == -1) return {};
      qs = url.substring(index+1);
    }
    pairs = qs.split('&');
    if (pairs == "") return {};
    for (var i = 0; i < pairs.length; ++i)
    {
      var p = pairs[i].split('=');
      if(p.length != 2) continue;
      map[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return map;
  };
})(jQuery);

Machicolation

Answer 51

A simple solution with plain JavaScript and regular expressions:

alert(getQueryString("p2"));

function getQueryString (Param) {
    return decodeURI("http://www.example.com/?p1=p11&p2=p2222".replace(new RegExp("^(?:.*[&?]" + encodeURI(Param).replace(/[.+*]/g, "$&") + "(?:=([^&]*))?)?.*$", "i"), "$1"));
}

JsFiddle

Lookeron

Answer 52

This is very simple method to get parameter value(query string)

Use gV(para_name) function to retrieve its value

var a=window.location.search;
a=a.replace(a.charAt(0),""); //Removes '?'
a=a.split("&");

function gV(x){
 for(i=0;i<a.length;i++){
  var b=a[i].substr(0,a[i].indexOf("="));
  if(x==b){
   return a[i].substr(a[i].indexOf("=")+1,a[i].length)}

Eldenelder

Answer 53

There are many solutions to retrieve URI query values, I prefer this one because it's short and works great:

function get(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}

Immure

That's neat, although that's essentially the top accepted answer distilled down a bit, e.g. you've lost the decoding of pluses-for-spaces in values . The encodeURIComponent for the key name is new, though, and on one hand more correct than the accepted answer for considering encodings in the key but on the other will still miss non-minimal encodings, e.g. get("key") won't match ?k%65y=value. – Lumberjack

Answer 54

var getUrlParameters = function (name, url) {
    if (!name) {
        return undefined;
    }

    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    url = url || location.search;

    var regex = new RegExp('[\\?&#]' + name + '=?([^&#]*)', 'gi'), result, resultList = [];

    while (result = regex.exec(url)) {
        resultList.push(decodeURIComponent(result[1].replace(/\+/g, ' ')));
    }

    return resultList.length ? resultList.length === 1 ? resultList[0] : resultList : undefined;
};

Cornhusk

this is a lot better than accepted solution to handle array values in query string. i.e. arr[]=1&arr[]=2 – Gamboge

Answer 55

There's a robust implementation in Node.js's source
https://github.com/joyent/node/blob/master/lib/querystring.js

Also TJ's qs does nested params parsing
https://github.com/visionmedia/node-querystring

Midian

Answer 56

If you do not wish to use a JavaScript library you can use the JavaScript string functions to parse window.location. Keep this code in an external .js file and you can use it over and over again in different projects.

// Example - window.location = "index.htm?name=bob";

var value = getParameterValue("name");

alert("name = " + value);

function getParameterValue(param)
{
    var url = window.location;
    var parts = url.split('?');
    var params = parts[1].split('&');
    var val = "";

    for ( var i=0; i<params.length; i++)
    {
        var paramNameVal = params[i].split('=');

        if ( paramNameVal[0] == param )
        {
            val = paramNameVal[1];
        }
    }
    return val;
}

Greenfield

Answer 57

If you want array-style parameters URL.js supports arbitrarily nested array-style parameters as well as string indexes (maps). It also handles URL decoding.

url.get("val[0]=zero&val[1]=one&val[2]&val[3]=&val[4]=four&val[5][0]=n1&val[5][1]=n2&val[5][2]=n3&key=val", {array:true});
// Result
{
    val: [
        'zero',
        'one',
        true,
        '',
        'four',
        [ 'n1', 'n2', 'n3' ]
    ]
    key: 'val'
}

Camlet

Answer 58

I believe this to be an accurate and concise way to achieve this (modified from http://css-tricks.com/snippets/javascript/get-url-variables/):

function getQueryVariable(variable) {

    var query = window.location.search.substring(1),            // Remove the ? from the query string.
        vars = query.split("&");                                // Split all values by ampersand.

    for (var i = 0; i < vars.length; i++) {                     // Loop through them...
        var pair = vars[i].split("=");                          // Split the name from the value.
        if (pair[0] == variable) {                              // Once the requested value is found...
            return ( pair[1] == undefined ) ? null : pair[1];   // Return null if there is no value (no equals sign), otherwise return the value.
        }
    }

    return undefined;                                           // Wasn't found.

}

Tribalism

That looks reasonable! You probably need to decode the values taken from the query string in case they've been encoded for submission with %s or +s though. – Lumberjack

Answer 59

This the most simple and small function JavaScript to get int ans String parameter value from URL

/* THIS FUNCTION IS TO FETCH INT PARAMETER VALUES */

function getParameterint(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=parseInt(url.replace(param+"=",""));
            alert(n); 
}
getParameteraint("page");
getParameteraint("pagee");

/*THIS FUNCTION IS TO FETCH STRING PARAMETER*/
function getParameterstr(param) {
            var val = document.URL;
            var url = val.substr(val.indexOf(param))  
            var n=url.replace(param+"=","");
            alert(n); 
}
getParameterstr("str");

Source And DEMO : http://bloggerplugnplay.blogspot.in/2012/08/how-to-get-url-parameter-in-javascript.html

Euhemerus

I think that can be easily defeated e.g. ?xyz=page&str=Expected&page=123 won't return 123 because it picks up the page string from xyz=page, and str will return Expected&page=123 rather than just Expected if it's not the last value on the line, etc. You're also not decodeUriComponent-ing the values extracted. Plus I couldn't try your demo - I got redirected to a betting website?? – Lumberjack

@Lumberjack you are talking about a RARE/WORST case.. But in normal and regular cases this code works fine and solves the purpose ...And about DEMO its working fine and shows how this function works! Thanks ! – Euhemerus

OK, finally managed to get your demo through adfly. Yes, that works OK but only because you have just the one string parameter and it's last - try using more than one and switching the orders around. Try putting the pagee parameter before the page parameter and it'll fail. For example here's your demo with the order of the three reversed. The other problem is if someone posts a string with a non-ASCII character in it, e.g. a space - it'll get URI encoded and you're not decoding that afterwards. – Lumberjack

Answer 60

There is a nice little url utility for this with some cool sugaring:

http://www.example.com/path/index.html?silly=willy#chucky=cheese

url();            // http://www.example.com/path/index.html?silly=willy#chucky=cheese
url('domain');    // example.com
url('1');         // path
url('-1');        // index.html
url('?');         // silly=willy
url('?silly');    // willy
url('?poo');      // (an empty string)
url('#');         // chucky=cheese
url('#chucky');   // cheese
url('#poo');      // (an empty string)

Check out more examples and download here: https://github.com/websanova/js-url#url

Vender

Answer 61

Most pretty but basic:

data = {};
$.each(
    location.search.substr(1).split('&').filter(Boolean).map(function(kvpairs){
        return kvpairs.split('=')
    }),
    function(i,values) {
        data[values.shift()] = values.join('=')
    }
);

It doesn't handle values lists such as ?a[]=1&a[]2

Depose

Neat! You may need to trim the leading '?' off the first item (I don't know if that's always necessary, but many answers here do) and you need to perform some unescaping of the value too (decodeURIComponent, plusses-to-spaces) – Lumberjack

Thank you, absolutely, and we also need a .filter(Boolean) to remove an empty string item in list when location.search is empty. That is: location.search.substr(1).split('&').filter(Boolean).map(... – Depose

And the reverse: a query string from the returned hashmap: $.map(queryhash, function(v,k){ return [k,v].join('=')}).join('&') – Depose

Answer 62

Use:

  $(document).ready(function () {
      var urlParams = {};
      (function () {
          var match,
          pl = /\+/g, // Regex for replacing addition symbol with a space
              search = /([^&=]+)=?([^&]*)/g,
              decode = function (s) {
                  return decodeURIComponent(s.replace(pl, " "));
              },
              query = window.location.search.substring(1);

          while (match = search.exec(query))
              urlParams[decode(match[1])] = decode(match[2]);
      })();
      if (urlParams["q1"] === 1) {
          return 1;
      }

Please check and let me know your comments. Also refer to How to get querystring value using jQuery.

Gauvin

That's identical to Soheil's answer which is itself a copy of Andy E's answer wrapped in jQuery and with the check on the end. You've also copied Soheil's mistake in the last section: there's no way that urlParams["q1"] can === 1 since it will always be a string not an integer at that point, and also return 1 from $(document).ready() doesn't really make sense either. Where did you get this code from? – Lumberjack

@Lumberjack : I have got this from codeproject.com/Tips/529496/Handling-QueryString-Using-jQuery – Boaster

Answer 63

I recommend Dar Lessons as a good plugin. I have worked with it fo a long time. You can also use the following code. Jus put var queryObj = {}; before document.ready and put the bellow code in the beginning of document.ready. After this code you can use queryObj["queryObjectName"] for any query object you have

var querystring = location.search.replace('?', '').split('&');
for (var i = 0; i < querystring.length; i++) {
    var name = querystring[i].split('=')[0];
    var value = querystring[i].split('=')[1];
    queryObj[name] = value;
}

Tarrsus

Two plugs for Dar Lessons in two posts? I don't think we can recommend the current version at least: it's vulnerable to script injection attacks. (I've emailed him to let him know). Like a lot of the split('=') solutions here already you're missing decodeURIComponent, and you might also want to handle missing values more gracefully too. – Lumberjack

Dar Lessons has now released 1.1 which fixes the script injection attack. – Lumberjack

Answer 64

Here is String prototype implementation:

String.prototype.getParam = function( str ){
    str = str.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regex = new RegExp( "[\\?&]*"+str+"=([^&#]*)" );    
    var results = regex.exec( this );
    if( results == null ){
        return "";
    } else {
        return results[1];
    }
}

Example call:

var status = str.getParam("status")

str can be a query string or url

Guessrope

That's basically the same as the top answer though, less some some of the unescaping, just put on the String.prototype. – Lumberjack

@Lumberjack This is useful for parsing any string query, not just in a URL. for example Oauth2 returns token response as a query string, this String prototype will be useful for parsing, most important is [\\?&]* instead of [\\?&] in RegExp, for parsing query string staring with new line – Guessrope

Answer 65

The shortest possible expression in terms of size to obtain a query object seems to be:

var params = {};
location.search.substr(1).replace(/([^&=]*)=([^&]*)&?/g,
  function () { params[decodeURIComponent(arguments[1])] = decodeURIComponent(arguments[2]); });

You can make use of the A element to parse a URI from a string into its location-like components (to get rid of #..., for example):

var a = document.createElement('a');
a.href = url;
// Parse a.search.substr(1)... as above

Bespectacled

Answer 66

This didn't work for me, I want to match ?b as the b parameter is present, and not match ?return as the r parameter, here is my solution.

window.query_param = function(name) {
  var param_value, params;

  params = location.search.replace(/^\?/, '');
  params = _.map(params.split('&'), function(s) {
    return s.split('=');
  });

  param_value = _.select(params, function(s) {
    return s.first === name;
  })[0];

  if (param_value) {
    return decodeURIComponent(param_value[1] || '');
  } else {
    return null;
  }
};

Gyrostatics

Which answer here didn't work for you, with those problems? (That'd be worth a comment on the answer itself, and I'd be interested to know too.) As for your solution, that looks like it's just a string-split solution using underscore.js? You're missing a call to decodeURIComponent probably. – Lumberjack

Nice catch, I added the decodeURIComponent (and a spec for it). The most upvoted answer (the 2600 points one for jolly) doesn't works as expected: doesn't returns null for non-found parameters, and doesn't detect ?b for instance a present parameter. – Gyrostatics

Answer 67

This will parse variables AND arrays from a URL string. It uses neither regex or any external library.

function url2json(url) {
   var obj={};
   function arr_vals(arr){
      if (arr.indexOf(',') > 1){
         var vals = arr.slice(1, -1).split(',');
         var arr = [];
         for (var i = 0; i < vals.length; i++)
            arr[i]=vals[i];
         return arr;
      }
      else
         return arr.slice(1, -1);
   }
   function eval_var(avar){
      if (!avar[1])
          obj[avar[0]] = '';
      else
      if (avar[1].indexOf('[') == 0)
         obj[avar[0]] = arr_vals(avar[1]);
      else
         obj[avar[0]] = avar[1];
   }
   if (url.indexOf('?') > -1){
      var params = url.split('?')[1];
      if(params.indexOf('&') > 2){
         var vars = params.split('&');
         for (var i in vars)
            eval_var(vars[i].split('='));
      }
      else
         eval_var(params.split('='));
   }
   return obj;
}

Example:

var url = "http://www.x.com?luckyNums=[31,21,6]&name=John&favFoods=[pizza]&noVal"
console.log(url2json(url));

Output:

[object]
   noVal: ""
   favFoods: "pizza"
   name:     "John"
   luckyNums:
      0: "31"
      1: "21"
      2: "6"

Eradis

Answer 68

Doing this reliably is more involved than one may think at first.

1. location.search, which is used in other answers, is brittle and should be avoided - for example, it returns empty if someone screws up and puts a #fragment identifier before the ?query string.
2. There are a number of ways URLs get automatically escaped in the browser, which makes decodeURIComponent pretty much mandatory, in my opinion.
3. Many query strings are generated from user input, which means assumptions about the URL content are very bad. Including very basic things like that each key is unique or even has a value.

To solve this, here is a configurable API with a healthy dose of defensive programming. Note that it can be made half the size if you are willing to hardcode some of the variables, or if the input can never include hasOwnProperty, etc.

Version 1: Returns a data object with names and values for each parameter. It effectively de-duplicates them and always respects the first one found from left-to-right.

function getQueryData(url, paramKey, pairKey, missingValue, decode) {

    var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;

    if (!url || typeof url !== 'string') {
        url = location.href; // more robust than location.search, which is flaky
    }
    if (!paramKey || typeof paramKey !== 'string') {
        paramKey = '&';
    }
    if (!pairKey || typeof pairKey !== 'string') {
        pairKey = '=';
    }
    // when you do not explicitly tell the API...
    if (arguments.length < 5) {
        // it will unescape parameter keys and values by default...
        decode = true;
    }

    queryStart = url.indexOf('?');
    if (queryStart >= 0) {
        // grab everything after the very first ? question mark...
        query = url.substring(queryStart + 1);
    } else {
        // assume the input is already parameter data...
        query = url;
    }
    // remove fragment identifiers...
    fragStart = query.indexOf('#');
    if (fragStart >= 0) {
        // remove everything after the first # hash mark...
        query = query.substring(0, fragStart);
    }
    // make sure at this point we have enough material to do something useful...
    if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
        // we no longer need the whole query, so get the parameters...
        query = query.split(paramKey);
        result = {};
        // loop through the parameters...
        for (i = 0, len = query.length; i < len; i = i + 1) {
            pairKeyStart = query[i].indexOf(pairKey);
            if (pairKeyStart >= 0) {
                name = query[i].substring(0, pairKeyStart);
            } else {
                name = query[i];
            }
            // only continue for non-empty names that we have not seen before...
            if (name && !Object.prototype.hasOwnProperty.call(result, name)) {
                if (decode) {
                    // unescape characters with special meaning like ? and #
                    name = decodeURIComponent(name);
                }
                if (pairKeyStart >= 0) {
                    value = query[i].substring(pairKeyStart + 1);
                    if (value) {
                        if (decode) {
                            value = decodeURIComponent(value);
                        }
                    } else {
                        value = missingValue;
                    }
                } else {
                    value = missingValue;
                }
                result[name] = value;
            }
        }
        return result;
    }
}

Version 2: Returns a data map object with two identical length arrays, one for names and one for values, with an index for each parameter. This one supports duplicate names and intentionally does not de-duplicate them, because that is probably why you would want to use this format.

function getQueryData(url, paramKey, pairKey, missingValue, decode) {

    var query, queryStart, fragStart, pairKeyStart, i, len, name, value, result;

    if (!url || typeof url !== 'string') {
          url = location.href; // more robust than location.search, which is flaky
    }
        if (!paramKey || typeof paramKey !== 'string') {
            paramKey = '&';
        }
        if (!pairKey || typeof pairKey !== 'string') {
            pairKey = '=';
        }
        // when you do not explicitly tell the API...
        if (arguments.length < 5) {
            // it will unescape parameter keys and values by default...
            decode = true;
        }

        queryStart = url.indexOf('?');
        if (queryStart >= 0) {
            // grab everything after the very first ? question mark...
            query = url.substring(queryStart + 1);
        } else {
            // assume the input is already parameter data...
            query = url;
        }
        // remove fragment identifiers...
        fragStart = query.indexOf('#');
        if (fragStart >= 0) {
            // remove everything after the first # hash mark...
            query = query.substring(0, fragStart);
        }
        // make sure at this point we have enough material to do something useful...
        if (query.indexOf(paramKey) >= 0 || query.indexOf(pairKey) >= 0) {
            // we no longer need the whole query, so get the parameters...
            query = query.split(paramKey);
            result = {
                names: [],
                values: []
            };
            // loop through the parameters...
            for (i = 0, len = query.length; i < len; i = i + 1) {
                pairKeyStart = query[i].indexOf(pairKey);
                if (pairKeyStart >= 0) {
                    name = query[i].substring(0, pairKeyStart);
                } else {
                    name = query[i];
                }
                // only continue for non-empty names...
                if (name) {
                    if (decode) {
                        // unescape characters with special meaning like ? and #
                        name = decodeURIComponent(name);
                    }
                    if (pairKeyStart >= 0) {
                        value = query[i].substring(pairKeyStart + 1);
                        if (value) {
                            if (decode) {
                                value = decodeURIComponent(value);
                            }
                        } else {
                            value = missingValue;
                        }
                    } else {
                        value = missingValue;
                    }
                    result.names.push(name);
                    result.values.push(value);
                }
           }
           return result;
       }
   }

Kreegar

Neat, though the majority of answers here deal with splitting up the query part into parameters rather than extracting it from an arbitrary URL. Most of them assume we're on the current page and so just use location.search to get the string you're extracting. – Lumberjack

this is not the point of the question, we need to extract each pair of query parameters as key/value, supporting arrays, empty values, etc.. by the way, "?hello#haha" is not a good behavior, as the #haha usually refeers to an anchor which does not make part of the parameter "hello" – Lavish

I took the very short and vague question to mean something very different than what everyone else did. It's now obvious to me what was meant, and I have updated my answer to include a significantly better design that is on par. – Kreegar

Answer 69

See this post or use this:

<script type="text/javascript" language="javascript">
    $(document).ready(function()
    {
        var urlParams = {};
        (function ()
        {
            var match,
            pl= /\+/g,  // Regular expression for replacing addition symbol with a space
            search = /([^&=]+)=?([^&]*)/g,
            decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
            query  = window.location.search.substring(1);

            while (match = search.exec(query))
                urlParams[decode(match[1])] = decode(match[2]);
        })();

        if (urlParams["q1"] === 1)
        {
            return 1;
        }
    });
</script>

Vistula

Your sample usage - returning from a document ready - seems odd, and AFAICS it'll never work: decode() will only ever return a string and your triple-equals-comparing it to an integer. Otherwise seems a neat solution. – Lumberjack

... although it's the same as Andy E's solution above. – Lumberjack

The link is broken. – Indign

Answer 70

This function will return a parsed JavaScript object with any arbitrarily nested values using recursion as necessary.

Here's a jsfiddle example.

[
  '?a=a',
  '&b=a',
  '&b=b',
  '&c[]=a',
  '&c[]=b',
  '&d[a]=a',
  '&d[a]=x',
  '&e[a][]=a',
  '&e[a][]=b',
  '&f[a][b]=a',
  '&f[a][b]=x',
  '&g[a][b][]=a',
  '&g[a][b][]=b',
  '&h=%2B+%25',
  '&i[aa=b',
  '&i[]=b',
  '&j=',
  '&k',
  '&=l',
  '&abc=foo',
  '&def=%5Basf%5D',
  '&ghi=[j%3Dkl]',
  '&xy%3Dz=5',
  '&foo=b%3Dar',
  '&xy%5Bz=5'
].join('');

Given any of the above test examples.

var qs = function(a) {
  var b, c, e;
  b = {};
  c = function(d) {
    return d && decodeURIComponent(d.replace(/\+/g, " "));
  };
  e = function(f, g, h) {
    var i, j, k, l;
    h = h ? h : null;
    i = /(.+?)\[(.+?)?\](.+)?/g.exec(g);
    if (i) {
      [j, k, l] = [i[1], i[2], i[3]]
      if (k === void 0) {
        if (f[j] === void 0) {
          f[j] = [];
        }
        f[j].push(h);
      } else {
        if (typeof f[j] !== "object") {
          f[j] = {};
        }
        if (l) {
          e(f[j], k + l, h);
        } else {
          e(f[j], k, h);
        }
      }
    } else {
      if (f.hasOwnProperty(g)) {
        if (Array.isArray(f[g])) {
          f[g].push(h);
        } else {
          f[g] = [].concat.apply([f[g]], [h]);
        }
      } else {
        f[g] = h;
      }
      return f[g];
    }
  };
  a.replace(/^(\?|#)/, "").replace(/([^#&=?]+)?=?([^&=]+)?/g, function(m, n, o) {
    n && e(b, c(n), c(o));
  });
  return b;
};

Ritchey

Looks broadly good, but why pre-minify it? It's tricky to follow in places as-is; in particular you're doing a few nasty things around the right-square-bracket line. Also an input something like c[xx=a&c[]=b will crash it. – Lumberjack

My intention wasn't to pre-minify it, rather I just suck at naming variables, so I didn't try to come up with better names. I reworked the code to accommodate your example inputs and respond appropriately. I also switched to using regex's instead of trying to slice strings (which as you pointed out didn't always work). – Ritchey

Answer 71

Quick, easy, and fast:

The function:

function getUrlVar() {
    var result = {};
    var location = window.location.href.split('#');
    var parts = location[0].replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        result [key] = value;
    });
    return result;
}

Usage:

var varRequest = getUrlVar()["theUrlVarName"];

Amye

That's similar to the fourth answer, albeit with less escaping and you don't accept ?key only params like that does (though you don't see them anymore). I'm not sure you need the i on the regexp options, and you're working with the whole href not just the search part which seems odd but it ought not make a difference. – Lumberjack

@Lumberjack Hi, Thank you for your comment - I can't see the similarity... He use decodeURIComponent which will work great but if we try it with accent characters - in some cases it fails (FF mostly) My answer As you can see is simple and quick that will fit most of the programmers who need a quick solution for query string variable extraction. Adding the i (case insensitivity) is a bit more flexible but can be removed, I agree. – Amye

Answer 72

This will work... You need to call this function where you need get the parameter by passing its name...

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

Siusan

That's almost identical to the top regexp answer except you're matching the whole URL not just the query string part and you're not removing escapes in the result. – Lumberjack

Answer 73

// Parse query string
var params = {}, queryString = location.hash.substring(1),
    regex = /([^&=]+)=([^&]*)/g,
    m;
while (m = regex.exec(queryString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}

Philologian

Uh, hash != querystring. – Subdeacon