将查询参数获取为对象 | CSS-Tricks

Nicholas Ortenzio 编写了这个小插件

jQuery.extend({

  getQueryParameters : function(str) {
	  return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
  }

});

所以如果 URL 是

你可以这样做

var queryParams = $.getQueryParameters();

并且 queryParams 将是一个类似于以下的对象

{
   "lunch": "sandwich",
   "dinner": "stirfry"
}

Andrew Jones

# 2014年2月22日

非常方便。想知道是否有一种方法可以像这样提供可下载的代码片段，以便轻松导入到 Codebox 等中。

zzzzBov

# 2014年2月22日

每次看到自定义查询字符串解析算法，我都会感到不寒而栗，因为它们几乎总是错误的。

例如，?foo=bar;foo=baz 应该生成

{
    "foo": [
        "bar",
        "baz"
    ]
}

并且该代码显然无法做到。

Ben Caplan

# 2014年2月22日

zzzzBov，作为修改后的替代方案，如何看待这个？

jQuery.extend({
  getQueryParameters : function(str) {
    return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){
      return n = n.split("="),
      ( !this[n[0]] ? this[n[0]] = n[1] : ((typeof this[n[0]] === 'object') ? this[n[0]].push(n[1]) : this[n[0]]=[this[n[0]], n[1]]) ),
      this
    }.bind({}))[0];
  }
});

zzzzBov

评论永久链接# 2014年2月23日

@Ben

这是您应该在编写之前设置单元测试的功能类型。通过一些测试，我发现以下字符串失败了

'?=&='
'?foo=bar&foo=baz;foo=qux'
''*

* 我修改了算法以删除 || document.location.search 以显式测试字符串
joe t

评论永久链接# 2014年2月23日

@zzzzBav：如果您将该查询字符串传递给 PHP（假设您已将“;”定义为参数分隔符），它将生成与该脚本相同的结果：最后一个值将赢得键。要生成您建议的数组，您需要这样：?foo[]=bar;foo[]=baz。上面的脚本仍然只会生成 {"foo[]":"baz"}。

这是一个范围狭窄的脚本，并非旨在用于高级数据结构。在这种情况下，它优雅、快速且易于实现。
joe t

评论永久链接# 2014年2月23日

抱歉，意思是 zzzzBov。（:）
zzzzBov

评论永久链接# 2014年2月25日

@Joe t，PHP 使用完全不同的查询字符串解析标准。在解析 PHP 应用程序中使用的查询字符串时，请谨慎操作。
joe t

评论永久链接# 2014年2月25日

@zzzzBov，按照这种逻辑，我们应该注意任何语言使用的查询字符串，因为没有广泛接受的标准。Ruby、PHP、Python、.Net……谁是对的？JavaScript 应该遵循哪一个？（为什么 query 是 JavaScript location 对象的一部分，但没有内置的解析器？）

诚然，期望 JavaScript 查询字符串解析器处理所有存在的变体是荒谬的。应始终谨慎行事。

它是一个关于如何实现的示例，而不是通用的解决方案。由于在大多数情况下使用它的程序员也将控制查询字符串本身，因此显然应该根据需要进行调整。（:）

Ben Caplan

# 2014年2月24日

@zzzzBov 我必须同意 @joe 的观点。我认为这里的预期用例是“正常”查询字符串的使用。您发现的异常情况的用例是什么？我理解您最初提出的问题有效，因为复选框和多选框会呈现具有冗余键的查询字符串，但是没有键的特殊字符或等号？我很想知道您遇到过哪些情况下这些是有用的情况。

此外，在博客评论提要中对提议的备用脚本进行单元测试是否有点过分？

zzzzBov

评论永久链接# 2014年2月25日

我提出这个问题的全部原因是为了让人们意识到查询字符串解析不应留给糟糕的自制解决方案。边缘情况不是问题，直到您受到它们的困扰。

Rob

# 2014年9月29日

这也不能处理 URL 编码。如果将 URL 编码的查询字符串通过此方法运行，则结果对象将仍然包含编码的文本。根据我的经验，这是不正确的。

Ryan

# 2014年12月16日

我认为还应该对替换中的正则表达式进行一个小更新，如下所示

.replace(/^.*(\?)/,'')

这将删除“？”之前的全部文本。原始正则表达式要求您传入

?param=val&param=val.

更新允许您传入

domain.com?param=val&param=val

Niels Oeltjen

# 2015年4月1日

jQuery 现在有 $.getParams(url);

http://www.justinas.tk

评论永久链接# 2015年5月27日

您在哪里找到此信息？您可以提供一些文档链接吗？

Eldon McGuinness

# 2015年4月28日

试试这个，它似乎适用于 zzzBov 提到的测试用例。 http://jsfiddle.net/EldonMcGuinness/cb57dusv/

Eldon McGuinness

评论永久链接# 2015年5月27日

只想补充一点，我在我的网站上发布了这段代码作为 JQuery 插件，并在我的搜索引擎中使用它，欢迎随时尝试。

Dhruv

# 2015年6月21日

可能应该更好地处理没有参数的情况。修改后的版本。如果字符串不存在或不一致，则返回 {}。

$.extend({
          getQueryParameters : function(str) {
              str = str || document.location.search;
              return (!str && {}) || str.replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
          }
        });

Alexandr Marchenko

# 2015年9月14日

查询字符串参数应该被解码。所以这是一个修复后的示例

return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = decodeURIComponent(n[1]),this}.bind({}))[0];

我所做的是用 decodeURIComponent 装饰了 n[1]

Nathasha Loos

# 2016年7月14日

我今天在我的网站上使用了这个，并对该方法做了一些改进。我没有使用“map”数组函数，而是使用了“reduce”函数，它返回单个对象而不是数组。

代码示例

http://codepen.io/nloos/pen/RRxkYN

raja

评论永久链接# 2017年10月11日

example_length=10&id=LAF-000021&id=LAF-000028，我想将其转换为 JSON。但是它
id 仅作为数组出现。

Sean

# 2017年3月3日

效果很好！但是，JSHint 不喜欢这样。它抱怨存在“逗号运算符的意外使用”。

评论

发表回复 取消回复

发表回复取消回复