更新:2018年9月
你可以使用URLSearchParams,它很简单,并且有体面的(但不完整的)浏览器支持。
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
原版
你不需要jQuery来实现这个目的。你可以只使用一些纯JavaScript。
function getParameterByName(name, url) {
if (!url) 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查询键的权威位置。
注意:该函数是区分大小写的。如果你喜欢不区分大小写的参数名,在RegExp中添加'i'修饰符 。
这是一个基于新的 URLSearchParams specs 的更新,以更简洁地实现相同的结果。请参阅下面题为 "URLSearchParams"的答案。
在snipplr.com上的Roshambo有一个简单的脚本来实现这个目标,描述在用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.com/index.html?lang=de
。
只要调用var langval = $.urlParam('lang');
,你就能得到它。
UZBEKJON在这方面也有一篇很好的博文,用jQuery获取URL参数& 值。
如果你使用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历史API,特别是history.pushState()
和history.replaceState()
,URL可以改变,这将使参数及其值的缓存失效。
这个版本将在每次历史变化时更新其内部的参数缓存。