Retrieve specific hash tag's value from url
In raw Javascript, how would one go about checking that a specifi开发者_如何学编程c 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.
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.
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]
);
},
window.location.hash
should give you what you want.
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 :)
精彩评论