如何在 JavaScript 中获取查询字符串值？
Posted
技术标签:
【中文标题】如何在 JavaScript 中获取查询字符串值？【英文标题】：How can I get query string values in JavaScript? 【发布时间】：2010-10-28 10:01:34 【问题描述】：有没有通过 jQuery（或没有）检索 query string 值的无插件方式？
如果是这样，怎么做？如果没有，是否有插件可以做到这一点？
【问题讨论】：
我使用jQuery-Plugin – getUrlParam (version 2)中描述的插件getUrlParam。 一个没有 RegEx 的 plain javascript 解决方案：css-tricks.com/snippets/javascript/get-url-variables 尽管该问题的最佳解决方案因其对不需要 jQuery 的出色观察而值得受欢迎，但它创建新的正则表达式并为所需的每个参数重新解析查询字符串的方法效率极低.更有效（和通用）的解决方案已经存在很长时间了，例如在本文中转载在这里：htmlgoodies.com/beyond/javascript/article.php/11877_3755006_3/… JavaScript query string的可能重复 约瑟夫，“不需要 jQuery 的出色观察”？当然不需要。 jQuery 所做的一切，它都使用 JavaScript。人们不使用 jQuery，因为它做了 JavaScript 不能做的事情。 jQuery 的重点是方便。 【参考方案1】：更新：2021 年 6 月
对于需要所有查询参数的特定情况：
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
更新：2018 年 9 月
你可以使用URLSearchParams，它很简单，有decent (but not complete) browser support。
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
原创
你不需要 jQuery 来达到这个目的。您可以只使用一些纯 JavaScript：
function getParameterByName(name, 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, ' '));
用法：
// 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)
注意：如果参数出现多次 (?foo=lorem&foo=ipsum)，您将获得第一个值 (lorem)。对此没有标准，用法也各不相同，例如这个问题：Authoritative position of duplicate HTTP GET query keys。
注意：该函数区分大小写。如果您更喜欢不区分大小写的参数名称，add 'i' modifier to RegExp
注意：如果遇到 no-useless-escape eslint 错误，可以将 name = name.replace(/[\[\]]/g, '\\$&'); 替换为 name = name.replace(/[[\]]/g, '\\$&')。
这是基于新URLSearchParams specs 的更新，以更简洁地实现相同的结果。请参阅下面标题为“URLSearchParams”的答案。
【讨论】：
我注意到Object.fromEntries(urlSearchParams) 产生了相同的结果。所以我们实际上不需要.entries()【参考方案2】：
这个很好用。其他一些答案中的正则表达式会引入不必要的开销。
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];
取自here
【讨论】：
您可能至少想在返回之前在pair[1] 上调用decodeUriComponent，如果不是像这里的所有其他解决方案一样先用空格替换加号。其他一些解决方案也更喜欢拆分 = 上的 2 个部分的限制，以便更宽松地接受输入。
@Rup 你是对的......实际上在我的代码中它总是一个数字而不是任何特殊字符，所以错过了......
谢谢！这是 Kindle 的实验浏览器唯一支持的方法。怪胎项目在这里！ :·)【参考方案3】：
URLSearchParams
Firefox 44+、Opera 36+、Edge 17+、Safari 10.3+ 和 Chrome 49+ 支持 URLSearchParams API：
Chrome Announcement and details Opera Announcement and details Firefox Announcement and details有一个 google 建议的 URLSearchParams polyfill 用于 IE 的稳定版本。
不是W3C标准化的，而是WhatWG的生活标准。
你可以在location上使用它：
const params = new URLSearchParams(location.search);
或
const params = (new URL(location)).searchParams;
当然也可以在任何网址上：
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, VALUE) API 读取/设置参数。您还可以遍历所有值 for (let p of params) 。
reference implementation 和 sample page 可用于审计和测试。
【讨论】：
【参考方案4】：可靠地做到这一点比人们最初想象的要复杂。
-
在其他答案中使用的
location.search 很脆弱，应该避免使用 - 例如，如果有人搞砸了并将#fragment 标识符放在?query 字符串之前，它会返回空。
在我看来，URL 可以通过多种方式在浏览器中自动转义，这使得 decodeURIComponent 几乎是强制性的。
许多查询字符串是从用户输入生成的，这意味着对 URL 内容的假设非常糟糕。包括非常基本的内容，例如每个键都是唯一的，甚至具有一个值。
为了解决这个问题，这里有一个可配置的 API，其健康剂量为 defensive programming。请注意，如果您愿意对某些变量进行硬编码，或者如果输入永远不能包含hasOwnProperty 等，则可以将其缩小一半。
版本 1： 返回一个数据对象，其中包含每个参数的名称和值。它有效地对它们进行重复数据删除，并始终尊重从左到右找到的第一个。
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;
版本 2： 返回具有两个相同长度数组的数据映射对象，一个用于名称，一个用于值，每个参数都有一个索引。这个支持重复名称，并且有意不去重复它们，因为这可能是您想要使用这种格式的原因。
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;
【讨论】：
整洁，尽管这里的大多数答案都涉及将查询部分拆分为参数，而不是从任意 URL 中提取它。他们中的大多数人假设我们在当前页面上，所以只需使用location.search 来获取您要提取的字符串。
这不是问题的重点，我们需要将每对查询参数提取为key/value，支持数组，空值等。顺便说一句，“?hello#haha”不是一个好的行为，因为#haha 通常指的是一个不构成参数“hello”的一部分的锚
我把这个非常简短和模糊的问题理解为与其他人所做的非常不同的事情。现在对我来说很明显是什么意思，我已经更新了我的答案，以包含一个明显更好的设计。【参考方案5】：
此处发布的一些解决方案效率低下。每次脚本需要访问参数时重复正则表达式搜索是完全没有必要的，一个函数将参数拆分为关联数组样式对象就足够了。如果您不使用 HTML 5 History API，则每次页面加载只需要一次。此处的其他建议也无法正确解码 URL。
var urlParams;
(window.@987654321@ = function ()
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) return @987654322@(s.replace(pl, " ")); ,
query = window.@987654323@.search.@987654324@(1);
urlParams = ;
while (match = search.@987654325@(query))
urlParams[decode(match[1])] = decode(match[2]);
)();示例查询字符串：
?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty
结果：
urlParams =
enc: " Hello ",
i: "main",
mode: "front",
sid: "de8d49b78a85a322c4155015fdce22c4",
empty: ""
alert(urlParams["mode"]);
// -> "front"
alert("empty" in urlParams);
// -> true
这也可以很容易地改进以处理数组样式的查询字符串。这方面的一个例子是here，但由于RFC 3986 中没有定义数组样式的参数，我不会用源代码污染这个答案。 For those interested in a "polluted" version, look at campbeln's answer below.
此外，正如 cmets 中所指出的，; 是 key=value 对的合法分隔符。处理; 或& 需要更复杂的正则表达式，我认为这是不必要的，因为很少使用;，而且我会说更不可能同时使用两者。如果您需要支持; 而不是&，只需在正则表达式中交换它们即可。
如果您使用的是服务器端预处理语言，您可能希望使用其原生 JSON 函数为您完成繁重的工作。例如，在 PHP 中，您可以编写：
<script>var urlParams = <?php echo @987654329@($_GET, JSON_HEX_TAG);?>;</script>简单多了！
#已更新
一个新的功能是检索重复的参数，如下
myparam=1&myparam=2。没有规范，但是，当前大多数方法都遵循数组的生成。
myparam = ["1", "2"]
所以，这是管理它的方法：
let urlParams = ;
(window.onpopstate = function ()
let 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))
if (decode(match[1]) in urlParams)
if (!Array.isArray(urlParams[decode(match[1])]))
urlParams[decode(match[1])] = [urlParams[decode(match[1])]];
urlParams[decode(match[1])].push(decode(match[2]));
else
urlParams[decode(match[1])] = decode(match[2]);
)();
【讨论】：
这就像一个魅力，每次都在页面加载时获取实时 URL：-) 非常好！不过，我建议引入局部变量let parameterKey = decode(match[1]); let parameterValue = decode(match[2]);。恕我直言，这使得正在发生的事情变得更加明显。【参考方案6】：
我喜欢Ryan Phelan's solution。但我看不出为此扩展 jQuery 有什么意义？没有使用 jQuery 功能。
另一方面，我喜欢谷歌浏览器的内置函数：window.location.getParameter。
那么为什么不使用它呢？好的，其他浏览器没有。因此，如果它不存在，让我们创建这个函数：
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];
;
这个函数或多或少来自 Ryan Phelan，但它的包装方式不同：名称清晰且不依赖其他 javascript 库。 More about this function on my blog.
【讨论】：
【参考方案7】：我宁愿使用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;
【讨论】：
我不想使用正则表达式并选择了这个解决方案。我发现它工作得很好。谢谢！【参考方案8】：如果您使用的是 Browserify，您可以使用 Node.js 中的 url 模块：
var url = require('url');
url.parse('http://example.com/?bob=123', true).query;
// returns "bob": "123"
延伸阅读：URL Node.js v0.12.2 Manual & Documentation
编辑：您可以使用URL 接口，它在几乎所有新浏览器中都被广泛采用，如果代码要在旧浏览器上运行，您可以使用polyfill like this one。这是一个关于如何使用 URL 接口获取查询参数（又名搜索参数）的代码示例
const url = new URL('http://example.com/?bob=123');
url.searchParams.get('bob');
你也可以使用 URLSearchParams，这里是 an example from MDN 使用 URLSearchParams 来做：
var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);
//Iterate the search parameters.
for (let p of searchParams)
console.log(p);
searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"
【讨论】：
url 模块 API 的文档在这里：nodejs.org/api/url.html
这对于 nw.js 开发来说非常有用。 Browserify 甚至不需要，因为大多数节点模块都像在 nw.js 窗口中一样工作。我已经测试了这段代码，并且没有任何修改就可以像魅力一样工作。
哦，这太棒了！ URLSearchParams 完美运行。非常感谢！
应该是最好的投票，自定义函数和附加库没有麻烦。它似乎也被 2019 年的浏览器主要采用。【参考方案9】：
ES2015 (ES6)
getQueryStringParams = query =>
return query
? (/^[?#]/.test(query) ? query.slice(1) : query)
.split('&')
.reduce((params, param) =>
let [key, value] = param.split('=');
params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
return params;
,
)
:
;
没有 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('&'));
使用?topic=123&name=query+string 之类的 URL，将返回以下内容：
qs["topic"]; // 123
qs["name"]; // query string
qs["nothere"]; // undefined (object)
谷歌方法
撕谷歌的代码我找到了他们使用的方法：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
它被混淆了，但它是可以理解的。它不起作用，因为某些变量未定义。
他们开始从? 和哈希# 中寻找url 上的参数。然后对于每个参数，他们用等号b[f][p]("=") 拆分（看起来像indexOf，他们使用字符的位置来获取键/值）。拆分后检查参数是否有值，如果有则存储d 的值，否则继续。
最后返回对象d，处理转义和+ 符号。这个对象和我的一样，具有相同的行为。
我作为 jQuery 插件的方法
(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);
用法
//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¶m2=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)
准备代码：方法声明
拆分测试代码
var qs = window.GetQueryString(query);
var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];
正则表达式测试代码
var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");
在 Windows Server 2008 R2 / 7 x64 上的 Firefox 4.0 x86 中测试
拆分方法：最快 144,780 ±2.17% 正则表达式方法：13,891 ±0.85% |慢 90%【讨论】：
【参考方案10】：只需使用两个拆分：
function get(n)
var half = location.search.split(n + '=')[1];
return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
我正在阅读所有以前的和更完整的答案。但我认为这是最简单快捷的方法。你可以签入这个jsPerf benchmark
要解决 Rup 注释中的问题，通过将第一行更改为下面的两行来添加条件拆分。但绝对准确意味着它现在比正则表达式慢（请参阅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;
因此，如果您知道自己不会遇到 Rup 的反案，这就是胜利。否则，正则表达式。
或者如果您可以控制查询字符串并且可以保证您尝试获取的值永远不会包含任何编码的 URL 字符（将这些值包含在一个值中将是一个坏主意）-您可以使用 以下是第一个选项的稍微简化和易读的版本：
function getQueryStringValueByName(name) var queryStringFromStartOfValue = location.search.split(name + '=')[1]; return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;
【讨论】：
【参考方案11】：这是 Andy E 链接的“处理数组样式查询字符串”的扩展版本。修复了一个错误（?key=1&key[]=2&key[]=3;1 丢失并替换为[2,3]），进行了一些小的性能改进（重新解码值，重新计算“[”位置等）并添加了一些改进（功能化，支持?key=1&key=2，支持;分隔符）。我把变量留得非常短，但添加了丰富的 cmets 以使它们可读（哦，我在本地函数中重用了 v，如果这令人困惑，很抱歉；）。
它将处理以下查询字符串...
?test=Hello&person=neek&person[]=jeff&person[]=jim&person[extra]=john&test3&nocache=1398914891264
...把它变成一个看起来像...的对象
"test": "Hello",
"person":
"0": "neek",
"1": "jeff",
"2": "jim",
"length": 3,
"extra": "john"
,
"test3": "",
"nocache": "1398914891264"
正如您在上面看到的，此版本处理一些“格式错误”的数组，即 - person=neek&person[]=jeff&person[]=jim 或 person=neek&person=jeff&person=jim，因为密钥是可识别且有效的（至少在 dotNet 的 NameValueCollection.Add 中）：
如果指定的key已经存在于目标NameValueCollection中 例如，将指定的值添加到现有的逗号分隔 “value1,value2,value3”形式的值列表。
似乎the jury is somewhat out 在重复键上，因为没有规范。在这种情况下，多个键存储为（假）数组。但请注意，我不将基于逗号的值处理成数组。
代码：
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;
;
【讨论】：
要获取查询字符串值，您可以使用此“GetParameterValues”函数。在这种情况下，您只需传递查询搅拌参数名称，它就会返回值 $(document).ready(function () var bid = GetParameterValues('token'); );函数 GetParameterValues(param) var url = decodeURIComponent(window.location.href); url = url.slice(url.indexOf('?') + 1).split('&'); for (var i = 0; i 我已经使用了一段时间了，到目前为止效果很好。除了处理 urlencoded 数组。使用q = decodeURIComponent(window.location.search.substring(1)), 也有助于它做到这一点。
对我来说，如果没有查询参数，这将无限循环:(【参考方案12】：
tl;dr
快速、完整的解决方案，可处理多值键和编码字符。
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))
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
)
这些代码是什么..."null-coalescing", short-circuit evaluation ES6 Destructuring assignments, Arrow functions, Template strings
例子："?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"
阅读更多...关于 Vanilla JavaScript 解决方案。
要访问 URL 的不同部分，请使用 location.(search|hash)
最简单的（虚拟）解决方案
var queryDict = ;
location.search.substr(1).split("&").forEach(function(item) queryDict[item.split("=")[0]] = item.split("=")[1])
"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined
多值键
简单的密钥检查(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]])
qd.key[index] 或qd[key][index] 访问值
> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]
编码字符？
将decodeURIComponent() 用于第二个或两者拆分。
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])
"?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"]
来自 cmets
*!!! 请注意，decodeURIComponent(undefined) 返回字符串 "undefined"。解决方案在于对&& 的简单使用，它确保不会对未定义的值调用decodeURIComponent()。 （请参阅顶部的“完整解决方案”。）
v = v && decodeURIComponent(v);
如果查询字符串为空 (location.search == "")，则结果有点误导qd == "": undefined。建议在启动解析函数之前检查查询字符串，如下所示：
if (location.search) location.search.substr(1).split("&").forEach(...)
【讨论】：
【参考方案13】：一个非常轻量级的jQuery方法：
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)
【讨论】：
整洁。已经有一些相同的答案 - 迭代一个拆分 - 尽管每个都没有使用 jQuery，而且我认为它们中的任何一个都不是完美的。我不明白你的闭包中的return，我认为你在阅读它们时需要decodeUriComponent 这两个pair[] 值。
是的，拥有 decodeUriComponent 是最佳实践——我只是在飞行中写的。至于退货……我只是养成了退货的习惯。完全没有必要【参考方案14】：
这里是my version of query string parsing code on 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;
【讨论】：
不错，但不处理这个案子filters[topic][]=list
你好，上面的代码如何通过Key获取值？？我想从此 URL 获取城市值...abc.xyzl/urlpart1/…【参考方案15】：
试试这个：
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(/(&|;|$)/))) : "";
;
然后这样称呼它：
if(location.search != "") location.search.getValueByKey("id");
您也可以将其用于 cookies：
if(navigator.cookieEnabled) document.cookie.getValueByKey("username");
这仅适用于具有 key=value[&|;|$]... 的字符串，不适用于对象/数组。
如果您不想使用 String.prototype... 将其移至函数并将字符串作为参数传递
【讨论】：
【参考方案16】：我使用这段代码 (JavaScript) 来获取通过 URL 传递的内容：
function getUrlVars()
var vars = ;
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value)
vars[key] = value;
);
return vars;
那么要将值赋给一个变量，你只需要指定你想要获取的参数，即如果URL是example.com/?I=1&p=2&f=3
您可以这样做来获取值：
var getI = getUrlVars()["I"];
var getP = getUrlVars()["p"];
var getF = getUrlVars()["f"];
那么值将是：
getI = 1, getP = 2 and getF = 3
【讨论】：
这很好，虽然它在键和值上缺少decodeURIComponent，而且您可能不需要正则表达式上的i 标志（这并不重要）。
但是如果你有 example.com/3（MVC 路由）【参考方案17】：
以下代码将创建一个具有两种方法的对象：
isKeyExist: 检查某个参数是否存在
getValue：获取特定参数的值。
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;
;
【讨论】：
【参考方案18】：这是获取参数值（查询字符串）的非常简单的方法
使用gV(para_name) 函数检索其值
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)
【讨论】：
【参考方案19】：如果您不想使用 JavaScript 库，您可以使用 JavaScript 字符串函数来解析 window.location。将此代码保存在外部 .js 文件中，您可以在不同的项目中反复使用它。
// 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;
【讨论】：
【参考方案20】：我推荐Dar Lessons 作为一个很好的插件。我已经使用它很长时间了。您也可以使用以下代码。
只需将var queryObj = ; 放在document.ready 之前，并将波纹管代码放在document.ready 的开头即可。在此代码之后，您可以将queryObj["queryObjectName"] 用于您拥有的任何查询对象
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;
【讨论】：
两个帖子中的 Dar 课程的两个插件？我认为我们至少不能推荐当前版本：它容易受到脚本注入攻击。 （我已经给他发了电子邮件让他知道）。就像这里的许多split('=') 解决方案一样，您已经缺少decodeURIComponent，并且您可能还希望更优雅地处理缺失值。
Dar Lessons 现已发布 1.1，修复了脚本注入攻击。【参考方案21】：
这里是String原型实现：
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];
调用示例：
var status = str.getParam("status")
str可以是查询字符串或url
【讨论】：
不过和top answer基本一样，少了一些转义，放在String.prototype上就行了。 @Rup 这对于解析任何字符串查询很有用，而不仅仅是在 URL 中。例如 Oauth2 将令牌响应作为查询字符串返回，这个 String 原型将用于解析，最重要的是[\\?&]* 而不是 RegExp 中的 [\\?&]，用于解析以新行开头的查询字符串【参考方案22】：
这对我不起作用，我想匹配 ?b 作为 b 参数，而不是匹配 ?return 作为 r 参数，这里是 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;
;
【讨论】：
这里的哪个答案不适合您，有这些问题？ （这值得对答案本身发表评论，我也有兴趣知道。）至于您的解决方案，看起来它只是使用 underscore.js 的字符串拆分解决方案？你可能错过了给decodeURIComponent 的电话。
很好，我添加了decodeURIComponent（以及它的规范）。最受好评的答案（2600 分给 jolly）没有按预期工作：没有为未找到的参数返回 null，也没有检测到 ?b，例如存在的参数。【参考方案23】：
这是我正在使用的：
/**
* 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://***.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
在最后一种情况下返回 'override' 而不是 '0' 使其与 PHP 一致。在 IE7 中工作。
【讨论】：
那是因为每个人似乎都有不同的要求来处理没有值的键或通过构建值数组来处理重复的键等。已经有很多拆分答案，但我没有看到一个完全正确的答案和这个一样，真的。 （FWIW 我认为paramName 需要在技术上过于 decodeURIComponented，尽管我怀疑有人会使用非平凡的参数。）
参数名称永远不需要解码。
为什么不呢？ HTML 5 不限制输入控件名称的字符集，也不能保证它们无论如何来自 HTML。我不明白为什么会对可打印字符进行限制。
@Sudar 因为没有理由拥有它们。大多数人总是包含它们只是因为他们总是看到其他人包含它们并且因为其他语言需要它们；通常它们在 JavaScript 中也被错误地认为是必需的，这有时会导致莫名其妙的问题。无缘无故地做事通常会产生误导； JavaScript 不是 C++ 或 PHP。查找defensive semicolon。
'令人惊讶的是，这里发布了多少过于复杂和不完整的解决方案'哈哈，具有讽刺意味..【参考方案24】：
用纯 JavaScript 代码保持简单：
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];
从 JavaScript 代码中的任何位置调用它：
var result = qs('someKey');
【讨论】：
【参考方案25】：这是我对 this excellent answer 的编辑 - 增加了解析查询字符串的功能，其中包含没有值的键。
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('&'));
重要提示！ 最后一行中该函数的参数不同。这只是一个如何将任意 URL 传递给它的示例。您可以使用 Bruno 回答的最后一行来解析当前 URL。
那么到底发生了什么变化？使用 url http://sb.com/reg/step1?param= 结果将是相同的。但是使用 url http://sb.com/reg/step1?param Bruno 的解决方案返回一个没有键的对象，而我的解决方案返回一个带有键 param 和 undefined 值的对象。
【讨论】：
【参考方案26】：我经常使用正则表达式，但不是为了那个。
在我的应用程序中读取一次查询字符串并从所有键/值对构建一个对象对我来说似乎更容易和更有效，例如：
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;
();
对于像 http://domain.com?param1=val1&param2=val2 这样的 URL，您可以稍后在代码中获取它们的值，例如 search.param1 和 search.param2。
【讨论】：
【参考方案27】：如果您有Underscore.js 或lodash，完成此操作的快速而肮脏的方法是：
_.object(window.location.search.slice(1).split('&').map(function (val) return val.split('='); ));
【讨论】：
整洁。与 top split-based answer 相比，虽然您缺少对 +s 和 decodeURIComponent 调用的处理，但对于简单的值，这就足够了。 是的，它实际上只是用于抓取简单的字母数字标记。在当前的项目中，这就是我所需要的，所以我真的不想要一个笨重的功能。 这是我用来制作查询参数的键值对象的：_.chain(document.location.search.slice(1).split('&')).invoke('split', '=').object().value()【参考方案28】：
用途：
$(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;
请检查并让我知道您的 cmets。另请参阅How to get querystring value using jQuery。
【讨论】：
这与Soheil's answer 相同，Andy E's answer 本身是用 jQuery 包装的 Andy E's answer 的副本，并带有最后的检查。您还在上一节中复制了 Soheil 的错误：urlParams["q1"] 不可能=== 1 因为在那时它总是一个字符串而不是整数，而且来自$(document).ready() 的return 1 也不是真的也有意义。您从哪里获得此代码？
@Rup ：我从codeproject.com/Tips/529496/Handling-QueryString-Using-jQuery得到这个【参考方案29】：
查看此post 或使用此：
<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>
【讨论】：
您的示例用法 - 从准备好的文档中返回 - 看起来很奇怪，而且 AFAICS 它永远不会工作：decode() 只会返回一个字符串，而您的三等式将它与一个整数进行比较。否则似乎是一个很好的解决方案。
...虽然和上面的Andy E's solution一样。
链接已损坏。【参考方案30】：
我在这里做了一个小的 URL 库来满足我的需要：https://github.com/Mikhus/jsurl
这是在 JavaScript 中操作 URL 的一种更常见的方式。同时它非常轻量级（压缩和压缩
关于最初的问题，做起来很简单：
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);
【讨论】：
这很有趣。为什么要手动解码值？您还将限制可以接受为 UTF-8 的最高字符代码，尽管我意识到您在实践中不太可能达到这一点。 为什么以这种方式解码在这里解释：unixpapa.com/js/querystring.html 实际上，我已经从那里获取了该想法的代码，在我的脚本的***评论中说明了什么 也不支持像filters[topic][]=list这样的对象数组以上是关于如何在 JavaScript 中获取查询字符串值？的主要内容，如果未能解决你的问题，请参考以下文章