是否有一种通过jQuery(或不使用)检索查询字符串值的无插件方法?

如果是,怎么办?如果没有,是否有插件可以这样做?


当前回答

获取所有querystring参数,包括复选框值(数组)。

考虑到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--loop,性能应该非常好。

支持:

空值(key=/key)键值(Key=value)数组(键[]=值)哈希(哈希标签被拆分)

笔记:

它不支持对象数组(key[key]=value)

如果空格为+,则保留为+。

如果需要,添加替换(/\+/g,“”)。

用法:

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

返回:

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

演示:

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

Info

如果你不明白什么,或者你读不懂函数,就问问。我很高兴解释我在这里做了什么。

如果您认为该函数不可读且无法维护,我很乐意为您重写该函数,但请考虑速记和按位运算符总是比标准语法更快(可能在ECMA-262书中阅读有关速记和按位数运算符的信息,或使用您最爱的搜索引擎)。用标准可读语法重写代码意味着性能损失。

其他回答

获取所有querystring参数,包括复选框值(数组)。

考虑到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--loop,性能应该非常好。

支持:

空值(key=/key)键值(Key=value)数组(键[]=值)哈希(哈希标签被拆分)

笔记:

它不支持对象数组(key[key]=value)

如果空格为+,则保留为+。

如果需要,添加替换(/\+/g,“”)。

用法:

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

返回:

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

演示:

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

Info

如果你不明白什么,或者你读不懂函数,就问问。我很高兴解释我在这里做了什么。

如果您认为该函数不可读且无法维护,我很乐意为您重写该函数,但请考虑速记和按位运算符总是比标准语法更快(可能在ECMA-262书中阅读有关速记和按位数运算符的信息,或使用您最爱的搜索引擎)。用标准可读语法重写代码意味着性能损失。

URL搜索参数

Firefox 44+、Opera 36+、Edge 17+、Safari 10.3+和Chrome 49+支持URLSearchParams API:

Chrome公告和详细信息歌剧院公告和详情Firefox公告和详细信息

谷歌建议URLSearchParams polyfill用于IE的稳定版本。

它没有被W3C标准化,但它是WhatWG的生活标准。

您可以在以下位置使用它:

const params = new URLSearchParams(location.search);

or

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

当然也可以在任何URL上:

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

还可以使用URL对象上的速记.searchParams属性获取参数,如下所示:

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

通过get(KEY)、set(KEY,VALUE)、append(KEY,VAL)API读取/设置参数。您还可以遍历(let p of params){}的所有值。

参考实现和示例页面可用于审计和测试。

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

它的前缀是jquery.*,但解析函数本身不使用jquery。它非常快,但仍然可以进行一些简单的性能优化。

它还支持URL中的列表和哈希表编码,例如:

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;

}

下面是我将Andy E的优秀解决方案打造成一个成熟的jQuery插件的尝试:

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

语法为:

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

两全其美!

我接受了这个答案,并添加了对可选地将URL作为参数传入的支持;返回到window.location.search。显然,这对于从不是当前页面的URL获取查询字符串参数非常有用:

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