Retrieve specific hash tag's value from url

问题

In raw Javascript, how would one go about checking that a specific hash tag exists in a url, then grab the value?

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

I want to be able to grab the value of either hashtag1 or hashtag2.

回答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];
           }
       })();
    }

Using it:

Check if a "hash key" is present:

 HashSearch.keyExists("thekey");

Get the value for a hash key:

 HashSearch.get('thekey');

Set the value for a hash key, and update the URL hash:

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

Remove a hash key from the URL:

 HashSearch.remove('thekey');

Reload the hash into the local object:

 HashSearch.load();

Push the current key value set to the URL hash:

 HashSearch.push();

Note that when a key does not exist and you try to get it, it will returned undefined. However, a key could exist with no value -- for example #key=val&novalue where novalue is a key with no value. If you do HashSearch.get("novalue") it would also return undefined. In which case, you should use HashSearch.keyExists("novalue") to verify that it is indeed a key.

回答2:

I use this, and it works just fine for me. It's a little adjusing to a line I picked up somewhere, I believe on SO.

getURLHashParameter : function(name) {

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

回答3:

window.location.hash should give you what you want.

回答4:

jQuery BBQ (back button and query) leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history. In addition, jQuery BBQ provides a full .deparam() method, along with both hash state management, and fragment / query string parse and merge utility methods.

In short: This library allows you to dynamically change a hash "query string" within your page and have the URL match. It also allows you to dynamically pull values and normalizes working with the "query string." Finally it will add the query strings into the history which allows the back button to function as a navigation between previous query hash values.

A good move for UX would be to check out a library like jQuery BBQ :)

来源：https://stackoverflow.com/questions/3729150/retrieve-specific-hash-tags-value-from-url

标签

javascript

hashtag