如何在 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】：如果您使用的是 jQuery，则可以使用库，例如 jQuery BBQ: Back Button & Query Library。
...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();
;如果你只想使用纯 JavaScript，你可以使用...
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 History API，特别是 history.pushState() 和 history.replaceState()，URL 可以更改，这将使参数及其值的缓存无效。
此版本将在每次历史记录更改时更新其内部参数缓存。
【讨论】：
【参考方案2】：更新：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()【参考方案3】：
snipplr.com 上的 Roshambo 在 Get URL Parameters with jQuery | Improved 中有一个简单的脚本来实现这一点。使用他的脚本，您还可以轻松提取所需的参数。
这里是要点：
$.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.com/index.html?lang=de。
只需拨打var langval = $.urlParam('lang');，就可以了。
UZBEKJON 对此也有一篇很棒的博文，Get URL parameters & values with jQuery。
【讨论】：
【参考方案4】：此处发布的一些解决方案效率低下。每次脚本需要访问参数时重复正则表达式搜索是完全没有必要的，一个函数将参数拆分为关联数组样式对象就足够了。如果您不使用 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]);。恕我直言，这使得正在发生的事情变得更加明显。【参考方案5】：
function GET()
var data = [];
for(x = 0; x < arguments.length; ++x)
data.push(location.href.match(new RegExp("/\?".concat(arguments[x],"=","([^\n&]*)")))[1])
return data;
example:
data = GET("id","name","foo");
query string : ?id=3&name=jet&foo=b
returns:
data[0] // 3
data[1] // jet
data[2] // b
or
alert(GET("id")[0]) // return 3
【讨论】：
【参考方案6】：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%【讨论】：
【参考方案7】：这是我将 Andy E 的优秀解决方案变成一个成熟的 jQuery 插件的尝试：
;(function ($)
$.extend(
getQueryString: function (name)
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[name];
);
)(jQuery);
语法是：
var someVar = $.getQueryString('myParam');
两全其美！
【讨论】：
【参考方案8】：这里是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/…【参考方案9】：
代码高尔夫：
var a = location.search&&location.search.substr(1).replace(/\+/gi," ").split("&");
for (var i in a)
var s = a[i].split("=");
a[i] = a[unescape(s[0])] = unescape(s[1]);
显示出来！
for (i in a)
document.write(i + ":" + a[i] + "<br/>");
;
在我的 Mac 上：test.htm?i=can&has=cheezburger 显示
0:can
1:cheezburger
i:can
has:cheezburger
【讨论】：
【参考方案10】：Roshambo jQuery 方法没有处理 URL 解码
http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/
在返回语句中添加时也添加了该功能
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
现在您可以找到更新的要点：
$.urlParam = function(name)
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) return 0;
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
【讨论】：
【参考方案11】：这是我不久前创建的一个功能，我对此非常满意。它不区分大小写 - 这很方便。另外，如果请求的 QS 不存在，它只会返回一个空字符串。
我使用它的压缩版本。我正在为新手类型发布未压缩的内容，以更好地解释发生了什么。
我确信这可以进行优化或以不同的方式完成以更快地工作，但它总是能很好地满足我的需要。
享受吧。
function getQSP(sName, sURL)
var theItmToRtn = "";
var theSrchStrg = location.search;
if (sURL) theSrchStrg = sURL;
var sOrig = theSrchStrg;
theSrchStrg = theSrchStrg.toUpperCase();
sName = sName.toUpperCase();
theSrchStrg = theSrchStrg.replace("?", "&") theSrchStrg = theSrchStrg + "&";
var theSrchToken = "&" + sName + "=";
if (theSrchStrg.indexOf(theSrchToken) != -1)
var theSrchTokenLth = theSrchToken.length;
var theSrchTokenLocStart = theSrchStrg.indexOf(theSrchToken) + theSrchTokenLth;
var theLocOfNextAndSign = theSrchStrg.indexOf("&", theSrchTokenLocStart);
theItmToRtn = unescape(sOrig.substring(theSrchTokenLocStart, theLocOfNextAndSign));
return unescape(theItmToRtn);
【讨论】：
另外，最好使用 decodeURI() 或 decodeURIComponent() 而不是 unescape()。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…【参考方案12】：Artem Barger's answer的改进版：
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/
【讨论】：
【参考方案13】：我经常使用正则表达式，但不是为了那个。
在我的应用程序中读取一次查询字符串并从所有键/值对构建一个对象对我来说似乎更容易和更有效，例如：
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。
【讨论】：
【参考方案14】：只是另一个建议。插件 Purl 允许检索 URL 的所有部分，包括锚点、主机等。
它可以与jQuery一起使用，也可以不与jQuery一起使用。
用法很简单很酷：
var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://allmarkedup.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。类似的代码看起来像这样，更完整的文档here：
var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'
【讨论】：
【参考方案15】：我宁愿使用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;
【讨论】：
我不想使用正则表达式并选择了这个解决方案。我发现它工作得很好。谢谢！【参考方案16】：我采用了this answer 并添加了对可选地将 URL 作为参数传递的支持；回退到 window.location.search。显然，这对于从不是当前页面的 URL 获取查询字符串参数很有用：
(function($, undef)
$.QueryString = function(url)
var pairs, qs = null, index, map = ;
if(url == undef)
qs = window.location.search.substr(1);
else
index = url.indexOf('?');
if(index == -1) return ;
qs = url.substring(index+1);
pairs = qs.split('&');
if (pairs == "") return ;
for (var i = 0; i < pairs.length; ++i)
var p = pairs[i].split('=');
if(p.length != 2) continue;
map[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
return map;
;
)(jQuery);
【讨论】：
【参考方案17】：这是我对 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 值的对象。
【讨论】：
【参考方案18】：以下代码将创建一个具有两种方法的对象：
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;
;
【讨论】：
【参考方案19】：试试这个：
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... 将其移至函数并将字符串作为参数传递
【讨论】：
【参考方案20】：我喜欢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.
【讨论】：
【参考方案21】：function getUrlVar(key)
var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search);
return result && unescape(result[1]) || "";
https://gist.github.com/1771618
【讨论】：
【参考方案22】：用纯 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');
【讨论】：
【参考方案23】：如果您进行的 URL 操作不仅仅是解析查询字符串，您可能会发现 URI.js 很有帮助。它是一个用于处理 URL 的库 - 并带有所有的花里胡哨。 （对不起，这里是自我广告）
将您的查询字符串转换为地图：
var data = URI('?foo=bar&bar=baz&foo=world').query(true);
data ==
"foo": ["bar", "world"],
"bar": "baz"
（URI.js 还“修复”了错误的查询字符串，例如 ?&foo&&bar=baz& 到 ?foo&bar=baz）
【讨论】：
【参考方案24】：这是我自己的看法。第一个函数将 URL 字符串解码为名称/值对的对象：
url_args_decode = function (url)
var args_enc, el, i, nameval, ret;
ret = ;
// use the DOM to parse the URL via an 'a' element
el = document.createElement("a");
el.href = url;
// strip off initial ? on search and split
args_enc = el.search.substring(1).split('&');
for (i = 0; i < args_enc.length; i++)
// convert + into space, split on =, and then decode
args_enc[i].replace(/\+/g, ' ');
nameval = args_enc[i].split('=', 2);
ret[decodeURIComponent(nameval[0])]=decodeURIComponent(nameval[1]);
return ret;
;
另外，如果您更改了一些参数，您可以使用第二个函数将参数数组放回 URL 字符串中：
url_args_replace = function (url, args)
var args_enc, el, name;
// use the DOM to parse the URL via an 'a' element
el = document.createElement("a");
el.href = url;
args_enc = [];
// encode args to go into url
for (name in args)
if (args.hasOwnProperty(name))
name = encodeURIComponent(name);
args[name] = encodeURIComponent(args[name]);
args_enc.push(name + '=' + args[name]);
if (args_enc.length > 0)
el.search = '?' + args_enc.join('&');
else
el.search = '';
return el.href;
;
【讨论】：
如果你仍然使用jQuery，那么后面的方法（url_args_replace）可以通过$.param()使用
为什么要使用 document.createElement("a") ？
@greg 在浏览器引擎中创建元素，它将为您解析一个 url 并提供与 url 字符串交互的搜索和 href 方法。【参考方案25】：
http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash
?param=value)
没有值的键（?param：没有等号或值）
带空值的键（?param=：等号，但等号右侧没有值）
重复键 (?param=1&param=2)
删除空键（?&&：没有键或值）
代码：
var queryString = window.location.search || '';
var keyValPairs = [];
var params = ;
queryString = queryString.substr(1);
if (queryString.length)
keyValPairs = queryString.split('&');
for (pairNum in keyValPairs)
var key = keyValPairs[pairNum].split('=')[0];
if (!key.length) continue;
if (typeof params[key] === 'undefined')
params[key] = [];
params[key].push(keyValPairs[pairNum].split('=')[1]);
如何调用：
params['key']; // returns an array of values (1..n)
输出：
key ["value"]
keyemptyvalue [""]
keynovalue [undefined, "nowhasvalue"]
【讨论】：
【参考方案26】：这个很好用。其他一些答案中的正则表达式会引入不必要的开销。
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 的实验浏览器唯一支持的方法。怪胎项目在这里！ :·)【参考方案27】：
以下函数返回您的 queryString 的对象版本。
您可以简单地编写obj.key1 和obj.key2 来访问参数中key1 和key2 的值。
function getQueryStringObject()
var querystring = document.location.search.replace('?','').split( '&' );
var objQueryString=;
var key="",val="";
if(typeof querystring == 'undefined')
return (typeof querystring);
for(i=0;i<querystring.length;i++)
key=querystring[i].split("=")[0];
val=querystring[i].split("=")[1];
objQueryString[key] = val;
return objQueryString;
要使用这个函数，你可以写
var obj= getQueryStringObject();
alert(obj.key1);
【讨论】：
【参考方案28】：我喜欢this one（取自 jquery-howto.blogspot.co.uk）：
// get an array with all querystring values
// example: var valor = getUrlVars()["valor"];
function getUrlVars()
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;
非常适合我。
【讨论】：
【参考方案29】：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 可用于审计和测试。
【讨论】：
【参考方案30】：这是获取类似于 PHP $_GET 数组的对象的快速方法：
function get_query()
var url = location.search;
var qs = url.substring(url.indexOf('?') + 1).split('&');
for(var i = 0, result = ; i < qs.length; i++)
qs[i] = qs[i].split('=');
result[qs[i][0]] = decodeURIComponent(qs[i][1]);
return result;
用法：
var $_GET = get_query();
对于查询字符串x=5&y&z=hello&x=6，这将返回对象：
x: "6",
y: undefined,
z: "hello"
【讨论】：
以上是关于如何在 JavaScript 中获取查询字符串值？的主要内容，如果未能解决你的问题，请参考以下文章