52

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

4

10 回答 10

54

在这里，从这个查询字符串解析器修改：

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的答案

于 2010-11-16T19:27:42.907 回答
37

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

于 2019-07-13T11:49:47.920 回答
31

签出：jQuery烧烤

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

（我正在开发的支持站点使用异步搜索，并且因为 BBQ 使得将整个对象塞入片段中变得微不足道，所以我使用它来“保留”我的搜索参数。这为我的用户提供了他们搜索的历史状态，以及允许他们为有用的搜索添加书签。最重要的是，当 QA 发现搜索缺陷时，他们可以直接链接到有问题的结果！）

于 2011-09-20T14:35:48.060 回答
21

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

于 2017-05-24T22:44:01.607 回答
3

我正在使用jQuery URL Parser库。

于 2010-11-16T18:44:39.997 回答
2

我正在查看这个问题的一堆答案，最后用一行将它们拼凑在一起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);
}, {});
于 2016-11-15T22:02:47.250 回答
0

我对这个问题的回答应该可以满足您的需求：

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;
};
于 2012-02-22T20:44:36.077 回答
0

您还可以使用 .hash 属性，在此滚动目录示例中演示了单击链接或locatioin。

于 2014-03-05T17:05:34.603 回答
0

这个 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'
});
于 2015-06-10T22:55:13.967 回答
-2

您可能想查看jsuri。它似乎对我很有效。

于 2012-11-05T21:29:11.203 回答