用JavaScript解析URL散列/片段标识符

退房: jQuery BBQ

jQuery-BBQ设计用于解析url(查询字符串或片段)中的内容,并进一步简化了基于片段的历史。这是Yarin在构建纯js解决方案之前一直在寻找的jQuery插件。具体来说 deparam.fragment() 函数完成任务。看一看!

(我正在开发的支持站点使用异步搜索,而且由于BBQ使得将整个对象塞进片段变得很简单,所以我使用它来“持久化”我的搜索参数。这将为我的用户提供其搜索的历史状态,并允许他们为有用的搜索添加书签。最重要的是,当QA发现搜索缺陷时,他们可以直接链接到有问题的结果!)

给你,改成这个 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函数-参见 answer 来自@Berkant

使用纯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'}

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

我在用 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);
}, {});

我的回答 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;
};

您还可以使用.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 . 对我来说似乎很管用。