如何在JavaScript中获取查询字符串的值？

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

• 常规的键/值对（?param=value）
• 没有值的键（?param：没有等号或值）
• 带有空值的键（?param=：有等号，但等号右边没有值）
• 重复的键（?param=1&param=2）
• 删除空键（?&&：没有键或值）

###代码：

-

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

-

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

###输出：

-

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

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

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

用法

获取特定参数/键：

query.get('param');

使用builder获取整个对象：

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

还有更多...请查看 GitHub 链接以获得更多示例。

特性

1. 对解码和参数均支持缓存
2. 支持哈希查询字符串 #hello?page=3
3. 支持传递自定义查询
4. 支持数组/对象参数 user[]="jim"&user[]="bob"
5. 支持空值管理 &&
6. 支持声明参数无值的情况 name&hello="world"
7. 支持重复参数 param=1&param=2
8. 源代码简洁、紧凑、易读 4kb
9. 支持 AMD、Require 和 Node

获取查询的单行代码：

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

这是我的查询字符串解析代码在GitHub上的版本。

它以jquery.*为“前缀”，但解析函数本身不使用jQuery。它非常快，但仍可进行简单的性能优化。

此外，它还支持URL中列表和哈希表的编码，例如：

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

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;

}

我更倾向于使用split()而不是正则表达式进行此操作：

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

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

而要警告，例如?q

alert(request.q)

这是我正在使用的内容：

/**
 * 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://dev59.com/nHNA5IYBdhLWcg3wmfAa#23946023
 */
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

在最后一种情况下返回“override”而不是“0”，这使其与PHP保持一致。在IE7中运行。

对于想要一种简短方法（但有限制）的人：

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

获取所有查询字符串参数，包括复选框的值（数组）。

考虑到GET参数的正确和正常使用，我发现大多数函数缺少对数组的支持以及删除哈希数据。

因此，我编写了以下函数：

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
}

使用简写运算符和 while-- 循环，性能应该非常好。

支持：

1. 空值（key= / key）
2. 键值对（key=value）
3. 数组（key[]=value）
4. 哈希表（哈希标签已拆分出来）

注意：

不支持对象数组（key[key]=value）

如果空格是 +，它将保留为 +。

如果需要，请添加 .replace(/\+/g, " ")。

用法：

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

返回：

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

演示:

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

信息

如果您不理解某些内容或无法阅读该函数，请询问。我很乐意解释我在这里做了什么。

如果您认为该函数不可读性和可维护性差，我可以为您重写该函数，但请考虑使用简写和位运算符始终比标准语法更快（也许阅读 ECMA-262 书中的简写和位运算符，或使用您喜欢的搜索引擎）。将代码重写为标准易读的语法会导致性能损失。