寻找一种使用 JavaScript/JQuery 将 URL 的散列/片段中的密钥对解析为对象/关联数组的方法
使用 JavaScript 解析 URL 哈希/片段标识符
IT技术
javascript
jquery
url
hash
fragment-identifier
2021-02-02 19:52:14
6个回答
这是从这个查询字符串解析器修改的：
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 插件。它涵盖了所有哈希解析问题。
更新 (2019)
显然现在有一个 URLSearchParams 函数 - 请参阅@Berkant 的回答
使用URLSearchParams。浏览器覆盖范围：https : //caniuse.com/urlsearchparams。主要浏览器完全支持它。如果您需要在不受支持的浏览器上使用它，这里有一个 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 文档以查看接口的所有方法。
退房：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'}
我正在使用jQuery URL 解析器库。