Retrieve specific hash tag's value from url

Question

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.

@Darin Dimitrov: I guess he means the fragment identifier of a URI. But an example would be helpful. — Gumbo, Sep 16 '10 at 17:35
Does `href.hash` not work? @Darin Dimitrov, I think @mike means the part including and after the `#` in the URL. — strager, Sep 16 '10 at 17:35
See this answer: http://stackoverflow.com/questions/3729156/how-provide-results-based-on-the-query-results-in-a-url/3729188#3729188 — gen_Eric, Sep 16 '10 at 17:40

score 26 · Accepted Answer · edited Dec 08 '11 at 08:50

    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.

this seems close but it does not work on anything further than the first hashtag. For example "http://www.example.com/index.html#hashtag1=value1hashtag2=value2" - keyExists, and get both see "hashtag2" as undefined. It does work with "hashtag1" though... — mike, Sep 16 '10 at 19:03
@mike: I just updated my answer with a few changes. Could you try them out? Also, the assumption is that hashs will look like: `#hashtag1=value1&hashtag2=value2` (note no # before every key). — Cristian Sanchez, Sep 16 '10 at 19:07
ok - I see.... this is perfect, set me on the right path! Thanks for getting my question the first time.. — mike, Sep 16 '10 at 19:12
@mike: No problem. I added some information regarding `keyExists` and `get` for keys with no values just in case you were wondering what the difference is. — Cristian Sanchez, Sep 16 '10 at 19:21
You should publish this code online, perhaps in a nuget package. — Kye, Oct 22 '12 at 04:51
Found a bug. If a parameter value contains an encoded '=' (%3D), the code incorrectly treats it as a variable boundary (for whatever reason, this is what Firefox does, anyway). To fix this, you should read `location.href` instead of `location.hash`. The latter seems to incorrectly decode the encoded equals sign prematurely. Instead of `window.location.href`, use `window.location.href.split('#', 2)[1] || ""` — Michi Kono, Feb 10 '13 at 21:59

Peter · Answer 2 · 2011-08-29T08:01:19.187

10

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]
        );
    },

edited Aug 29 '11 at 08:01

answered Aug 25 '11 at 08:57

Peter

47,963
46
132
181

1

Works great - Drop in and bang ! – Yugal Jindle Feb 28 '13 at 12:20

score 7 · Answer 3 · answered Sep 16 '10 at 18:24

7

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

answered Sep 16 '10 at 18:24

palswim

11,856
6
53
77

score 0 · Answer 4 · answered Jan 31 '12 at 01:51

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 :)

Retrieve specific hash tag's value from url

4 Answers4

Linked