使用JavaScript解析URL哈希/片段标识符

Question

寻找一种方法,使用JavaScript/JQuery将URL的哈希/片段中的密钥对解析为对象/关联数组

Answer 1

在这里,从这个查询字符串解析器修改:

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插件.它涵盖了所有哈希解析问题.

Answer 2

退房:jQuery BBQ

jQuery BBQ设计用于从url(查询字符串或片段)解析事物,并且更加简化基于片段的历史记录.这是Yarin在他整理一个纯粹的js解决方案之前所寻找的jQuery插件.具体来说,deparam.fragment()函数可以完成这项工作.看一看!

(我正在研究的支持网站使用异步搜索,因为BBQ使得将整个对象整合到片段中变得微不足道,我使用它来"保留"我的搜索参数.这为我的用户提供了他们搜索的历史状态,以及允许他们为有用的搜索添加书签.最重要的是,当QA发现搜索缺陷时,他们可以直接链接到有问题的结果!)

Answer 3

使用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 文档以查看接口的所有方法。

Answer 4

在纯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'}