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

Question

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

Answer 1

签出：jQuery BBQ

jQuery BBQ设计用于解析url（查询字符串或片段）中的内容，并且进一步简化了基于片段的历史记录。这是Yarin在构建纯js解决方案之前一直在寻找的jQuery插件。具体来说，deparam.fragment()功能可以完成这项工作。看看！

[最重要的是，当质量检查人员发现搜索缺陷时，他们可以直接链接到有问题的结果！）

Answer 2

您可能想签出

jsuri。对我来说似乎很好。

Answer 3

这里是此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 /插件
更新：
我现在根据霍维斯的答案推荐jQuery BBQ plugin。它涵盖了所有哈希解析问题。
更新（2019）显然，现在有一个URLSearchParams函数-参见@Berkant的answer

Answer 4

使用纯Java语言执行此操作：

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

Answer 5

我正在使用jQuery URL Parser库。

Answer 6

我正在寻找一堆有关此问题的答案，然后使用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);
}, {});

Answer 7

使用URLSearchParams。浏览器覆盖率：https://caniuse.com/#search=URLSearchParams。主要浏览器完全支持它。

如何阅读简单的键：

// window.location.hash = "#any_hash_key=any_value"

var parsedHash = new URLSearchParams(
    window.location.hash.substr(1) // skip the first char (#)
);

console.log(parsedHash.get('any_hash_key')); // any_value

查看我上面链接的Mozilla文档，以查看界面的所有方法。

Answer 8

我对this question的回答应该可以满足您的要求：

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;
};

Answer 9

您还可以使用.hash属性，如在此scrolling table of contents示例中针对单击的链接或locatioin演示的。

Answer 10

此jquery API

does解析哈希标签：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'
});