About the author

Related Articles

73 Comments

  1. 1
    Martin

    Martin Borthiry

    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;
    
    Reply
  2. 2
    Artem

    Artem Barger

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

    function getParameterByName(name, url) {
        if (!url) 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.


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

    Reply
  3. 3
    Campbeln@email.null'

    Campbeln

    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;
    };
    
    Reply
  4. 4
    Qwerty@email.null'

    Qwerty

    tl;dr

    A quick, complete solution, which handles multivalued keys and encoded 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)})
    

    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 &&, 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(...)
    
    Reply
  5. 5
    BrunoLM@email.null'

    BrunoLM

    ES2015 (ES6)

    const getParams = query => {
      if (!query) {
        return { };
      }
    
      return (/^[?#]/.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.

    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 they store the value of d, if not it 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
    Reply
  6. 6
    Paul

    Paul Sweatte

    URLSearchParams

    Firefox 44+, Opera 36+ and Chrome 49+ support the URLSearchParams API:

    Safari Nightly has implemented it, and it is in development for Microsoft Edge as well. There is a google-suggested URLSearchParams polyfill for the stable versions of Safari, Edge, and IE.

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

    You can use it on location, but you need to remove the ? question mark (for example, with .slice(1)):

    let params = new URLSearchParams(location.search.slice(1));
    

    or

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

    Or of course on any URL:

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

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

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

    Reply
  7. 7
    Roi@email.null'

    Roi

    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)
    
    Reply
  8. 8
    Vadim@email.null'

    Vadim

    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;
    
    }
    
    Reply
  9. 9
    user981090@email.null'

    user981090

    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

    Reply
  10. 10
    user2579312@email.null'

    user2579312

    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
    
    Reply
  11. 11
    Anoop@email.null'

    Anoop

    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;
           }
    };
    
    Reply
  12. 12
    Ankit_Shah55@email.null'

    Ankit_Shah55

    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)}
    
    Reply
  13. 13
    Robert

    Robert Bolton

    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;
    }
    
    Reply
  14. 14
    farnoush

    farnoush resa

    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;
    }
    
    Reply
  15. 15
    krisrak@email.null'

    krisrak

    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

    Reply
  16. 16
    Dorian@email.null'

    Dorian

    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;
      }
    };
    
    Reply
  17. 17
    Sagiv

    Sagiv Ofek

    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');
    
    Reply
  18. 18
    skaurus@email.null'

    skaurus

    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.

    Reply
  19. 19
    Mic@email.null'

    Mic

    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://domain.com?param1=val1&param2=val2 you can get their value later in your code as search.param1 and search.param2.

    Reply
  20. 20
    acjay@email.null'

    acjay

    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('='); }));
    
    Reply
  21. 21
    Pushkraj@email.null'

    Pushkraj

    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.

    Reply
  22. 22
    soheil

    soheil bijavar

    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>
    
    Reply
  23. 23
    Mikhus@email.null'

    Mikhus

    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:pass@example.com: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);
    
    Reply
  24. 24
    Ph0en1x@email.null'

    Ph0en1x

    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;
    };
    
    Reply
  25. 25
    Kevin

    Kevin Cox

    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'
    }
    
    Reply
  26. 26
    tim@email.null'

    tim

    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'}
    
    Reply
  27. 27
    Anoop@email.null'

    Anoop

    One-liner to get the query:

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

    Shlomi Hassid

    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"];
    
    Reply
  29. 29
    Saidulu

    Saidulu Buchhala

    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

    Reply
  30. 30
    cocco@email.null'

    cocco

    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.

    Reply
  31. 31
    sonorita@email.null'

    sonorita

    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];
    }
    
    Reply
  32. 32
    AlfaTeK@email.null'

    AlfaTeK

    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://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version
    var url = purl('http://allmarkedup.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://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
    url.protocol(); // returns 'http'
    url.path(); // returns '/folder/dir/index.html'
    
    Reply
  33. 33
    Peter

    Peter T Bosse II

    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;
    };
    
    Reply
  34. 34
    brandonjp@email.null'

    brandonjp

    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.com/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.

    Reply
  35. 35
    Andy

    Andy E

    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!

    Reply
  36. 36
    Mohammad

    Mohammad Arif

    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;
    }
    
    Reply
  37. 37
    Tomamais@email.null'

    Tomamais

    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.

    Reply
  38. 38
    Clint@email.null'

    Clint

    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);
    }
    
    Reply
  39. 39
    Paulpro@email.null'

    Paulpro

    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"
    }
    
    Reply
  40. 40
    orip@email.null'

    orip

    From the MDN:

    function loadPageVar (sVar) {
      return unescape(window.location.search.replace(new RegExp("^(?:.*[&\?]" + escape(sVar).replace(/[.+*]/g, "\$&") + "(?:\=([^&]*))?)?.*$", "i"), "$1"));
    }
    
    alert(loadPageVar("name"));
    
    Reply
  41. 41
    nkh@email.null'

    nkh

    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

    Reply
  42. 42
    Konstantin

    Konstantin Tarkus

    // 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]);
    }
    
    Reply
  43. 43
    Seth

    Seth Holladay

    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;
       }
    

    }

    Reply
  44. 44
    alex@email.null'

    alex

    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.

    Reply
  45. 45
    Damien@email.null'

    Damien

    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

    Reply
  46. 46
    George@email.null'

    George

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

    location.search.split('myParameter=')[1]
    
    Reply
  47. 47
    daluege@email.null'

    daluege

    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
    
    Reply
  48. 48
    Pithikos@email.null'

    Pithikos

    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"
    
    Reply
  49. 49
    gewel@email.null'

    gewel

    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://dummy.com/?stringtext=jquery&stringword=jquerybyexample

    var tech = GetQueryStringParams('stringtext');
    var blog = GetQueryStringParams('stringword');
    
    Reply
  50. 50
    Mat

    Mat Ryer

    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.

    Reply
  51. 51
    BlueMark@email.null'

    BlueMark

    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]);
    }
    
    Reply
  52. 52
    kayz1@email.null'

    kayz1

    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;
    };
    
    Reply
  53. 53
    clyfe@email.null'

    clyfe

    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

    Reply
  54. 54
    Jet@email.null'

    Jet

    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
    
    Reply
  55. 55
    Gabriel

    Gabriel Ryan Nahmias

    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.
    
    }
    
    Reply
  56. 56
    Nijikokun@email.null'

    Nijikokun

    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
    Reply
  57. 57
    jolly.exe@email.null'

    jolly.exe

    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

    Reply
  58. 58
    James@email.null'

    James

    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/

    Reply
  59. 59
    Rob@email.null'

    Rob

    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

    Reply
  60. 60
    Albireo@email.null'

    Albireo

    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");
    
    Reply
  61. 61
    Imdad@email.null'

    Imdad

    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);
    
    Reply
  62. 62
    IT

    IT ppl

    This one works fine

    function getQuerystring(key) {
        var query = window.location.search.substring(1);
        alert(query);
        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

    Reply
  63. 63
    vol7ron@email.null'

    vol7ron

    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"]
      
    Reply
  64. 64
    BMitch@email.null'

    BMitch

    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;
    };
    
    Reply
  65. 65
    rodneyrehm@email.null'

    rodneyrehm

    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)

    Reply
  66. 66
    alkos333@email.null'

    alkos333

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

    https://gist.github.com/1771618

    Reply
  67. 67
    Anatoly

    Anatoly Mironov

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

    Reply
  68. 68
    shanimal@email.null'

    shanimal

    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
    
    Reply
  69. 69
    mynameistechno@email.null'

    mynameistechno

    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);
    
    Reply
  70. 70
    Ryan

    Ryan Phelan

    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!

    Reply
  71. 71
    Vladimir

    Vladimir Kornea

    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: http://stackoverflow.com/a/23946023/2407309
     */
    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.

    Reply
  72. 72
    Bernesto@email.null'

    Bernesto

    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.test.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>');
    
    Reply
  73. 73
    Eneko

    Eneko Alonso

    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)) {
                paramParts = params[param].split('=');
                result[paramParts[0]] = decodeURIComponent(paramParts[1] || "");
            }
        }
        return result;
    }
    
    Reply

Leave a Reply

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

Copyright © 2017 SolutionMmyself.com