寻找一种使用 JavaScript/JQuery 将密钥对从 URL 的哈希/片段解析为对象/关联数组的方法
【问题讨论】：
标签： javascript jquery url hash fragment-identifier
在这里，修改自 query string parser:
function getHashParams() {
var hashParams = {};
var e,
a = /\+/g, // Regex for replacing addition symbol with a space
r = /([^&;=]+)=?([^&;]*)/g,
d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
q = window.location.hash.substring(1);
while (e = r.exec(q))
hashParams[d(e[1])] = d(e[2]);
return hashParams;
}
不需要 JQuery/插件
更新：
我现在根据 Hovis 的回答推荐 jQuery BBQ plugin。它涵盖了所有哈希解析问题。
更新（2019 年）
显然现在有一个 URLSearchParams 函数 - 参见 @Berkant 的 answer
【讨论】：
r 正则表达式中的分号有什么作用？
使用URLSearchParams。浏览器覆盖率：https://caniuse.com/urlsearchparams。它在主要浏览器中得到完全支持。 Here 是一个 polyfill，如果您需要在不受支持的浏览器上使用它。
如何读取一个简单的键：
// window.location.hash = "#any_hash_key=any_value"
const parsedHash = new URLSearchParams(
window.location.hash.substr(1) // skip the first char (#)
);
console.log(parsedHash.get("any_hash_key")); // any_value
查看我上面链接的 Mozilla 文档以查看接口的所有方法。
【讨论】：
Object.fromEntries(parsedHash)
查看：jQuery BBQ
jQuery BBQ 设计用于从 url 解析事物（查询字符串或片段），并进一步简化了基于片段的历史记录。这是 Yarin 在组合纯 js 解决方案之前一直在寻找的 jQuery 插件。具体来说，deparam.fragment() 函数完成了这项工作。看看吧！
（我正在开发的支持网站使用异步搜索，并且因为 BBQ 可以轻松地将整个对象塞入片段中，所以我使用它来“保留”我的搜索参数。这为我的用户提供了他们搜索的历史状态，并且还允许他们为有用的搜索添加书签。最重要的是，当 QA 发现搜索缺陷时，他们可以直接链接到有问题的结果！）
【讨论】：
在纯 Javascript 中执行此操作：
var hash = window.location.hash.substr(1);
var result = hash.split('&').reduce(function (result, item) {
var parts = item.split('=');
result[parts[0]] = parts[1];
return result;
}, {});
http://example.com/#from=2012-01-05&to=2013-01-01
变成
{from: '2012-01-05', to:'2013-01-01'}
【讨论】：
#this=is+a+test 加号应该转换为空格......还有其他十几种特殊情况。尝试自己实现这一点很疯狂。这是一个常见的问题。
URLSearchParams 的答案，这是我试图通过投票解决的问题。
我正在使用jQuery URL Parser 库。
【讨论】：
我正在寻找这个问题的一堆答案，最后用reduce的一行将它们拼凑在一起：
const hashObj = location.hash.replace('#', '').split('&').reduce((prev, item) => Object.assign({[item.split('=')[0]]: item.split('=')[1]}, prev), {});
这一行显然发生了很多事情。为了清晰起见，可以这样重写：
const hashObj = location.hash.replace('#', '').split('&').reduce((prev, item) => {
return Object.assign({[item.split('=')[0]]: item.split('=')[1]}, prev);
}, {});
【讨论】：
我对@987654321@ 的回答应该符合您的要求：
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;
};
【讨论】：
您还可以使用 .hash 属性，在此 scrolling table of contents 示例中演示的单击链接或 locatioin。
【讨论】：
这个 jquery API 会解析哈希标签：https://jhash.codeplex.com/
// get the "name" querystring value
var n = jHash.val('name');
// get the "location" querystring value
var l = jHash.val('location');
// set some querystring values
jHash.val({
name: 'Chris',
location: 'WI'
});
【讨论】：
您可能想查看 jsuri。它似乎对我很有效。
【讨论】：