URLから特定のハッシュタグの値を取得します

StackOverflow https://stackoverflow.com/questions/3729150

  •  03-10-2019
  •  | 
  •  

質問

Raw JavaScriptでは、特定のハッシュタグがURLに存在することをどのように確認し、値をつかむのでしょうか？

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

どちらかの価値をつかむことができるようになりたい Hashtag1 また Hashtag2.

役に立ちましたか？

解決 

    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") それが実際に鍵であることを確認するため。

他のヒント

私はこれを使用していますが、それは私にとってうまく機能します。それは私がどこかで拾った行に少し補助されています、私はそう信じています。 

getURLHashParameter : function(name) {

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

window.location.hash あなたが望むものをあなたに与えるべきです。

jQuery BBQ （バックボタンとクエリ）HTML5 Hashchangeイベントを活用して、シンプルで強力なブックマーク可能な#Hash履歴を可能にします。さらに、jQuery BBQは、ハッシュ状態管理の両方と、断片 /クエリ文字列の解析とマージのユーティリティメソッドの両方とともに、完全な.deparam（）メソッドを提供します。

要するに、このライブラリを使用すると、ページ内のハッシュ「クエリ文字列」を動的に変更し、URLを一致させることができます。また、[クエリ文字列]の動作を動的に引き出し、正規化することもできます。最後に、クエリ文字列が履歴に追加され、以前のクエリハッシュ値間のナビゲーションとしてバックボタンを機能させることができます。

UXの良い動きは、jQuery BBQのようなライブラリをチェックアウトすることです:)

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top