有没有一种无需插件的方式，可以通过jQuery（或者不使用jQuery）来获取查询字符串的值？
如果有，该如何实现？如果没有，是否有插件可以实现这个功能？
如何在JavaScript中获取查询字符串的值？
2694
- Subliminal Hash
6
我使用在 jQuery-Plugin – getUrlParam (version 2) 中描述的插件 getUrlParam。 - coma
我喜欢Dojo的queryToObject。如果你在节食，这个函数可以轻松地从框架中提取出来。 - hurrymaplelad
69一个纯 JavaScript 的解决方案，不使用正则表达式：http://css-tricks.com/snippets/javascript/get-url-variables/ - Lorenzo Polidori
6尽管对这个问题的顶级解决方案由于其出色的观察力指出了不需要使用jQuery而备受欢迎，但是它创建新的正则表达式并为每个所需参数重新解析查询字符串的方法极其低效。有更加高效（和通用）的解决方案存在已久，例如在此文章中再版的：http://www.htmlgoodies.com/beyond/javascript/article.php/11877_3755006_3/How-to-Use-a-JavaScript-Query-String-Parser.htm - Joseph Myers
1可能是JavaScript查询字符串的重复问题。 - user456814
4约瑟夫，“jQuery 不是必需品”的这一观点，当然它并非必须。jQuery所做的一切都可以使用JavaScript实现。人们使用jQuery是为了方便。jQuery的意义在于提供便利，而不是因为它能做比JavaScript更多的事情。 - Val Kornea
73个回答
10385
使用 URLSearchParams 从查询字符串中获取参数。
例如：
例如：
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
更新：2022年1月
使用{{link1：Proxy()}}比使用{{link3：Object.fromEntries()}}更快，而且支持更好。
但是这种方法的缺点是您不能再迭代查询参数了。
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
let value = params.some_key; // "some_value"
更新：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' 修饰符到正则表达式
注意：如果你遇到了“no-useless-escape”的ESLint错误，你可以将 name = name.replace(/[\[\]]/g, '\\$&'); 替换为 name = name.replace(/[[\]]/g, '\\$&')。
这是基于新的URLSearchParams规范的更新，以更简洁地实现相同的结果。请见下方标题为 "URLSearchParams" 的答案。
- Artem Barger
17
22021年6月和代理解决方案无法与SPA（单页应用程序）一起使用。 SPA更改页面的内容，甚至可以更改URL相对路径（例如添加查询字符串）。 - shimatai
1@JeffThompson，尾随逗号是允许但不是必需的。它们使开发人员能够向对象添加新条目，而无需编辑任何现有条目的行。 - kaerimasu
22022年1月：如果您需要将同一参数名称的所有值作为数组使用，则可以使用
searchParams.getAll(prop)。 - andy10为什么不使用这样的代码：
param.get('paramName')``` - Mohammad Kermani5代理在阅读代码或调试由于没有普通的JS对象而导致的奇怪问题时并不更高效。当您确定解析查询参数是应用程序的瓶颈时，可以使用代理（或者可能会问为什么您的URL中有数百万个查询参数）。在那之前，请使用清晰易懂的Object.fromEntries()。 - Jason Hoetger
显示剩余12条评论
1776
一些在这里发布的解决方案是低效的。每次脚本需要访问参数时重复正则表达式搜索是完全不必要的，只需要一个函数将参数拆分为关联数组样式的对象即可。如果您没有使用HTML 5历史记录API，则每页加载仅需要一次。这里的其他建议也无法正确解码URL。
如果你正在使用服务器端的预处理语言，你可能希望使用其本地的 JSON 函数来帮助你完成繁重的工作。例如，在 PHP 中，你可以编写：
var urlParams;
(window.<a rel="noreferrer" href="https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate">onpopstate</a> = function () {
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return <a rel="noreferrer" href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/decodeURIComponent">decodeURIComponent</a>(s.replace(pl, " ")); },
query = window.<a rel="noreferrer" href="https://developer.mozilla.org/en-US/docs/DOM/window.location">location</a>.search.<a rel="noreferrer" href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/substring">substring</a>(1);
urlParams = {};
while (match = search.<a rel="noreferrer" href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp/exec">exec</a>(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
这段代码还可以进一步改进，以支持处理类似数组的查询字符串。一个例子可以在这里找到，但是由于类似数组的参数在RFC 3986中没有定义，因此我不会在这个回答中污染它。对于那些有兴趣看“污染”版本的人，可以看下面campbeln的回答。
此外，正如评论中指出的那样，; 是 key=value 对的合法分隔符。需要使用更复杂的正则表达式来处理 ; 或 &，但我认为这是不必要的，因为很少使用 ;，而且两者都被同时使用的可能性更小。如果你需要支持 ; 而不是 &，只需在正则表达式中交换它们即可。
如果你正在使用服务器端的预处理语言，你可能希望使用其本地的 JSON 函数来帮助你完成繁重的工作。例如，在 PHP 中，你可以编写：
<script>var urlParams = <?php echo <a rel="noreferrer" href="http://php.net/manual/en/function.json-encode.php">json_encode</a>($_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]);
}
}
})();
- Andy E
3
这个方法非常好用，每次页面加载时都能成功获取实时URL :-) - Vetrivel PS
非常好！不过，我建议引入本地变量
let parameterKey = decode(match[1]); let parameterValue = decode(match[2]);。这样更明显，我认为。 - mihca我使用这个作为回退到最佳答案之后，因为在那之后这是最完整的解决方案。 - Lior Gross
1326
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)
Google方法
我分析了Google的代码，发现他们使用的方法是：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));
性能测试（split方法与正则表达式方法的比较） (jsPerf)
准备代码：方法声明
Split测试代码
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进行测试
- Split方法: 144,780 ±2.17% 最快
- 正则表达式方法: 13,891 ±0.85% | 慢90%
- BrunoLM
1
非常棒的研究。我建议您将“substr”替换为“substring”，以避免在各种编辑器中出现弃用警告（这可能是8个人对此方法投反对票的唯一解释，除了疯狂）。 - Grigore Madalin
721
URLSearchParams
URLSearchParams API is supported by Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ and Chrome 49+. For more details, please refer to the announcements and documentation of each browser.
A URLSearchParams polyfill recommended by Google is available for stable versions of Internet Explorer, but note that it is not standardized by W3C and only a living standard by WhatWG.
You can use it on the location object.
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);
您还可以使用 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) {} 迭代所有值。
- Paul Sweatte
2
1const params = new URL(location.href).searchParams; 不要依赖于静态文本来获取URL。 - chri3g91
@chri3g91 实际上，正如答案所示，您可以使用
const params = new URL(location).searchParams;。 - luke_mclachlan681
改进版 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/
- James
402
只是另一个建议。插件Purl可以检索URL的所有部分，包括锚点、主机等。
它可与jQuery或不使用jQuery一起使用。
使用非常简单和酷炫:
var url = $.url('http://example.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://example.com/folder/dir/index.html?item=value'); // plain JS version
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'
然而，截至2014年11月11日，Purl已不再维护，作者建议使用URI.js代替。该jQuery插件不同之处在于它专注于元素 - 对于使用字符串，只需直接使用URI，带有或不带有jQuery。类似的代码如下，更完整的文档请参见此处：
var url = new URI('http://example.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'
- AlfaTeK
263
简而言之
一种快速、完整的解决方案，可以处理多值键和编码字符。
// using ES5 (200 characters)
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)})
// as a function with reduce
function getQueryParams() {
return location.search
? location.search.substr(1).split`&`.reduce((qd, item) => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v); return qd}, {})
: {}
}
多行文本：
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"，短路求值
ES6 解构赋值, 箭头函数, 模板字符串
####例子:
"?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"
阅读更多...关于纯JavaScript解决方案。
使用location.(search|hash)访问URL的不同部分
最简单（虚拟）解决方案
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"]
v = v && decodeURIComponent(v);
if (location.search) location.search.substr(1).split("&").forEach(...)
- Qwerty
226
Roshambo在snipplr.com上有一个简单的脚本，可以实现这个功能，使用jQuery获取URL参数 | 改进版中有详细描述。使用他的脚本，您也可以轻松地提取您想要的参数。
以下是要点：
$.urlParam = function(name, url) {
if (!url) {
url = window.location.href;
}
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url);
if (!results) {
return undefined;
}
return results[1] || undefined;
}
那么只需从查询字符串中获取您的参数。
因此，如果URL / 查询字符串是xyz.example/index.html?lang=de。
只需调用var langval = $.urlParam('lang');，然后你就得到了它。
UZBEKJON也在他的博客文章中写了一篇很棒的帖子，使用jQuery获取URL参数和值。
- brandonjp
172
如果您正在使用jQuery，可以使用库，例如jQuery BBQ：后退按钮和查询库。
jQuery BBQ提供完整的
编辑：添加Deparam示例：
如果您只想使用普通的JavaScript，您可以使用...
因为新的HTML历史API，特别是
此版本将在每次历史记录更改时更新其内部参数缓存。
jQuery BBQ提供完整的
.deparam（）方法，以及哈希状态管理和片段/查询字符串解析和合并实用程序方法。编辑：添加Deparam示例：
var DeparamExample = function() {
var params = $.deparam.querystring();
//nameofparam is the name of a param from url
//code below will get param if ajax refresh with hash
if (typeof params.nameofparam == 'undefined') {
params = jQuery.deparam.fragment(window.location.href);
}
if (typeof params.nameofparam != 'undefined') {
var paramValue = params.nameofparam.toString();
}
};var getParamValue = (function() {
var params;
var resetParams = function() {
var query = window.location.search;
var regex = /[?&;](.+?)=([^&;]+)/g;
var match;
params = {};
if (query) {
while (match = regex.exec(query)) {
params[match[1]] = decodeURIComponent(match[2]);
}
}
};
window.addEventListener
&& window.addEventListener('popstate', resetParams);
resetParams();
return function(param) {
return params.hasOwnProperty(param) ? params[param] : null;
}
})();
因为新的HTML历史API，特别是
history.pushState()和history.replaceState()，URL可能会发生变化，从而使参数及其值的缓存失效。此版本将在每次历史记录更改时更新其内部参数缓存。
- alex
103
只需使用两个split函数：
function get(n) {
var half = location.search.split(n + '=')[1];
return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}
我阅读了所有之前更加完整的回答，但是我认为这是最简单和最快的方法。你可以在这个jsPerf基准测试中查看。
为了解决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;
- Martin Borthiry
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接