如何在 JavaScript 中获取查询字符串值？
更新：2021 年 6 月
对于需要所有查询参数的特定情况：
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
更新：2018 年 9 月
您可以使用URLSearchParams，它简单且具有不错（但不完整）的浏览器支持。
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)。对此没有标准并且用法各不相同，例如参见这个问题：重复 HTTP GET 查询键的权威位置。
注意：该函数区分大小写。如果您更喜欢不区分大小写的参数名称，请将“i”修饰符添加到 RegExp
注意：如果你得到一个 no-useless-escape eslint 错误，你可以name = name.replace(/[\[\]]/g, '\\$&');用name = name.replace(/[[\]]/g, '\\$&').
这是基于新的URLSearchParams 规范的更新，以更简洁地实现相同的结果。请参阅下面标题为“ URLSearchParams ”的答案。
此处发布的某些解决方案效率低下。每次脚本需要访问参数时都重复正则表达式搜索是完全没有必要的，一个函数将参数拆分为关联数组样式的对象就足够了。如果您不使用 HTML 5 History API，则每次页面加载只需要一次。此处的其他建议也无法正确解码 URL。
var urlParams;
(window.onpopstate = 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);
urlParams = {};
while (match = search.exec(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中没有定义数组样式的参数，我不会用源代码污染这个答案。对于那些对“受污染”版本感兴趣的人，请查看下面 Campbeln 的回答。
此外，正如评论中指出的那样，;是对的合法分隔符key=value。它需要一个更复杂的正则表达式来处理;or &，我认为这是不必要的，因为很少;使用，我会说两者都使用的可能性更大。如果您需要支持;而不是&，只需在正则表达式中交换它们。
如果您使用的是服务器端预处理语言，您可能希望使用其原生 JSON 函数为您完成繁重的工作。例如，在 PHP 中你可以这样写：
<script>var urlParams = <?php echo json_encode($_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]);
}
}
})();
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('&'));
使用类似 的 URL ?topic=123&name=query+string，将返回以下内容：
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?和 hash 中寻找参数#。然后对于他们在等号中拆分的每个参数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));
性能测试（拆分方法对正则表达式方法）（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%
Artem Barger 答案的改进版本：
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
有关改进的更多信息，请参阅：http : //james.padolsey.com/javascript/bujs-1-getparameterbyname/
网址搜索参数
火狐44+，歌剧36+，边缘17+，Safari浏览器10.3+和Chrome 49+支持URLSearchParams API：
对于稳定版本的 IE，有一个谷歌建议的URLSearchParams polyfill。
您可以将其用于location：
const params = new URLSearchParams(location.search);
或者
const params = (new URL(location)).searchParams;
或者当然在任何 URL 上：
const url = new URL('https://example.com?foo=1&bar=2');
const params = new URLSearchParams(url.search);
您还可以使用.searchParamsURL 对象上的速记属性来获取参数，如下所示：
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) {}。