从 url 检索特定哈希标签的值答案

【问题标题】：Retrieve specific hash tag's value from url从 url 检索特定哈希标签的值
【发布时间】：2011-04-13 08:24:33
【问题描述】：

在原始 Javascript 中，如何检查 url 中是否存在特定的哈希标记，然后获取值？

示例：http://www.example.com/index.html#hashtag1=value1&#hashtag2=value2

我希望能够获取 hashtag1 或 hashtag2 的值。

【问题讨论】：

url中的hash tag是什么？你能举个例子吗？
@Darin Dimitrov：我猜他的意思是 URI 的片段标识符。但举个例子会很有帮助。
href.hash 不起作用吗？ @Darin Dimitrov，我认为 @mike 表示 URL 中包含 # 和之后的部分。
看到这个答案：stackoverflow.com/questions/3729156/…

【解决方案1】：

    var HashSearch = new function () {
       var params;

       this.set = function (key, value) {
          params[key] = value;
          this.push();
       };

       this.remove = function (key, value) {
          delete params[key];
          this.push();
       };


       this.get = function (key, value) {
           return params[key];
       };

       this.keyExists = function (key) {
           return params.hasOwnProperty(key);
       };

       this.push= function () {
           var hashBuilder = [], key, value;

           for(key in params) if (params.hasOwnProperty(key)) {
               key = escape(key), value = escape(params[key]); // escape(undefined) == "undefined"
               hashBuilder.push(key + ( (value !== "undefined") ? '=' + value : "" ));
           }

           window.location.hash = hashBuilder.join("&");
       };

       (this.load = function () {
           params = {}
           var hashStr = window.location.hash, hashArray, keyVal
           hashStr = hashStr.substring(1, hashStr.length);
           hashArray = hashStr.split('&');

           for(var i = 0; i < hashArray.length; i++) {
               keyVal = hashArray[i].split('=');
               params[unescape(keyVal[0])] = (typeof keyVal[1] != "undefined") ? unescape(keyVal[1]) : keyVal[1];
           }
       })();
    }

使用它：

检查是否存在“哈希键”：

 HashSearch.keyExists("thekey");

获取哈希键的值：

 HashSearch.get('thekey');

设置哈希键的值，并更新 URL 哈希：

 HashSearch.set('thekey', 'hey');

从 URL 中删除哈希键：

 HashSearch.remove('thekey');

将哈希重新加载到本地对象中：

 HashSearch.load();

将当前键值集推送到 URL 哈希：

 HashSearch.push();

请注意，当密钥不存在并且您尝试get 时，它将返回undefined。然而，一个键可能没有值存在——例如#key=val&novalue，其中 novalue 是一个没有值的键。如果您执行HashSearch.get("novalue")，它也会返回undefined。在这种情况下，您应该使用HashSearch.keyExists("novalue") 来验证它确实是一个密钥。

【讨论】：

这似乎很接近，但它不适用于第一个主题标签之外的任何内容。例如“example.com/index.html#hashtag1=value1&#hashtag2=value2” - keyExists，并让两者都将“hashtag2”视为未定义。它确实适用于“hashtag1”...
@mike：我刚刚更新了我的答案，做了一些更改。你能试一试吗？此外，假设哈希看起来像：#hashtag1=value1&hashtag2=value2（注意每个键之前没有#）。
好的 - 我明白了....这是完美的，让我走上正确的道路！感谢您第一次收到我的问题..
@mike：没问题。我为没有值的键添加了一些关于 keyExists 和 get 的信息，以防你想知道它们之间的区别。
您应该在线发布此代码，也许在 nuget 包中。

【解决方案2】：

我使用它，它对我来说很好用。这有点调整我在某处捡到的一条线，我相信 SO。

getURLHashParameter : function(name) {

        return decodeURI(
            (RegExp('[#|&]' + name + '=' + '(.+?)(&|$)').exec(location.hash)||[,null])[1]
        );
    },

【讨论】：

效果很好 - 插入并爆炸！

【解决方案3】：

window.location.hash 应该给你你想要的。

【讨论】：

【解决方案4】：

jQuery BBQ（后退按钮和查询）利用 HTML5 hashchange 事件来实现简单但功能强大的可书签 #hash 历史记录。此外，jQuery BBQ 提供了完整的 .deparam() 方法，以及哈希状态管理、片段/查询字符串解析和合并实用方法。

简而言之：此库允许您动态更改页面中的哈希“查询字符串”并匹配 URL。它还允许您动态提取值并规范使用“查询字符串”。最后，它会将查询字符串添加到历史记录中，从而允许后退按钮用作先前查询哈希值之间的导航。

对于 UX 来说，一个不错的举措是查看 jQuery BBQ 之类的库 :)

【讨论】：