JavaScript 查询字符串

IT技术 javascript query-string
2021-02-08 18:59:32

是否有任何 JavaScript 库可以根据查询字符串、ASP.NET样式制作字典

可以使用的东西,如:

var query = window.location.querystring["query"]?

“查询字符串”是否.NET领域之外被称为其他东西为什么不location.search分成键/值集合

编辑:我已经编写了自己的函数,但是任何主要的 JavaScript 库都这样做吗?

6个回答

您可以从location.search属性中提取键/值对,该属性具有 URL后面的部分?符号,包括?象征。

function getQueryString() {
  var result = {}, queryString = location.search.slice(1),
      re = /([^&=]+)=([^&]*)/g, m;

  while (m = re.exec(queryString)) {
    result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }

  return result;
}

// ...
var myParam = getQueryString()["myParam"];
@RussBradberry 你真的不能拥有val=foo&val=bar&val=baz它必须是val[]=foo&val[]=bar&val[]=baz
2021-03-14 18:59:32
@CMS 这不处理查询字符串中数组的可能性,?val=foo&val=bar&val=baz 您将如何适应这种情况?
2021-03-21 18:59:32
当我的值有空格并且我的变量以%20's结尾时,这对我来说似乎不完整,所以我result[keyValuePair[0]] = keyValuePair[1] || '';result[keyValuePair[0]] = decodeURIComponent((keyValuePair[1]+'').replace(/\+/g, '%20')) || '';
2021-03-21 18:59:32
这不是一场胜利。如果键的值中包含 '=' 字符怎么办?例如 dork.com/?equation=10=2。您可能会争辩说它应该是 URL 编码的,但它肯定不是必须的。我曾经犯过这样的错误,自己写了一个简单的函数。该函数考虑了不止一种边缘情况。
2021-03-22 18:59:32
@James,忘了说几个月前我修改了这个函数,现在它可以正确地处理你的例子dork.com/?equation=10=2......
2021-04-08 18:59:32

tl; dr使用 vanilla javascript 在一行(ish)代码上的解决方案

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

对于查询字符串,?a=1&b=2&c=3&d&e它返回:

> queryDict
a: "1"
b: "2"
c: "3"
d: undefined
e: undefined

多值键编码字符?

请参阅如何在 JavaScript 中获取查询字符串值的原始答案

"?a=1&b=2&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"
> queryDict
a: ["1", "5", "t e x t"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]
@JonnyLeeds 没问题,我确切地知道您的意思,但是,为什么要在新行上编写每个链接命令?然后有一个作为参数给出的函数(参数通常是内联的),它只有一个赋值。它尖叫着要内联!:D
2021-03-11 18:59:32
@Qwerty,这可能是因为您的“单行”应该重新格式化,以便阅读它不需要水平滚动。我已经调整过了。
2021-03-11 18:59:32
哈哈我喜欢!抱歉,我曾经和一个曾经说“我找到了一个可以做 x 的单行划线”的人一起工作,然后只给你看 3 行去掉换行符的行!
2021-03-24 18:59:32
该死的,我不知道该说什么......你明白了。在这里,有一些多行的解决方案:` var queryDict = {}; location.search.substr(1).split("&").forEach(function(item) { queryDict[item.split("=")[0]] = item.split("=")[1]; });`
2021-04-02 18:59:32
那不是一行——而是几行格式错误!
2021-04-08 18:59:32
CMS 提供的方法更简单、更简洁。特别是 如果您还没有使用 jquery。
2021-03-16 18:59:32
这应该是 jquery 原生的
2021-03-19 18:59:32
这是正确的链接:plugins.jquery.com/query-object
2021-03-20 18:59:32
@EvanMulawski 谢谢。该插件似乎只是消失了。我添加了一个不同的链接,这可能会有所帮助。
2021-03-25 18:59:32
你可以参考这个库来做到这一点 - github.com/Mikhus/jsurl
2021-03-30 18:59:32

找到这篇文章后,当我审视自己时,我想我应该补充一点,我认为投票最多的解决方案并不是最好的。它不处理数组值(例如 ?a=foo&a=bar - 在这种情况下,我希望得到 a 返回 ['foo', 'bar'])。据我所知,它还没有考虑编码值 - 例如十六进制字符编码,其中 %20 表示空格(例如:?a=Hello%20World)或用于表示空格的加号(例如: ?a=Hello+World)。

Node.js 为查询字符串解析提供了看起来非常完整的解决方案。将其取出并在您自己的项目中使用很容易,因为它具有相当好的隔离性并获得许可。

它的代码可以在这里查看:https : //github.com/joyent/node/blob/master/lib/querystring.js

Node 的测试可以在这里看到:https : //github.com/joyent/node/blob/master/test/simple/test-querystring.js我建议用流行的答案尝试其中的一些,看看它是如何处理它们。

我还参与了一个专门添加此功能的项目。它是 Python 标准库查询字符串解析module的一个端口。我的叉子可以在这里找到:https : //github.com/d0ugal/jquery.qeeree

不仅仅是从 Node,js 借用代码,它是高度交织的。
2021-04-03 18:59:32

或者您可以使用库sugar.js

来自 Sugarjs.com:

Object.fromQueryString ( str , deep = true )

将 URL 的查询字符串转换为对象。如果 deep 为 false,则转换将只接受浅层参数(即,不接受具有 [] 语法的对象或数组),因为这些不是普遍支持的。

Object.fromQueryString('foo=bar&broken=wear') >{"foo":"bar","broken":"wear"}
Object.fromQueryString('foo[]=1&foo[]=2') >{"foo":[1,2]}

例子:

var queryString = Object.fromQueryString(location.search);
var foo = queryString.foo;