210

I have a URL that is like:

www.example.com/task1/1.3.html#a_1

How can I get the a_1 anchor value using jQuery and store it as a variable?

TylerH
  • 20,816
  • 57
  • 73
  • 92
zjm1126
  • 32,782
  • 53
  • 118
  • 163

6 Answers6

545

For current window, you can use this:

var hash = window.location.hash.substr(1);

To get the hash value of the main window, use this:

var hash = window.top.location.hash.substr(1);

If you have a string with an URL/hash, the easiest method is:

var url = 'https://www.stackoverflow.com/questions/123/abc#10076097';
var hash = url.split('#').pop();

If you're using jQuery, use this:

var hash = $(location).attr('hash');
Silvio Delgado
  • 6,628
  • 3
  • 17
  • 21
  • 1
    Elegant answer. Are there any cases in which this doesn't work? – sscirrus May 27 '13 at 20:54
  • 2
    shortcut version - `var hash = window.location.hash.substr(1);` because of a JS have both substr/substring functions, they are different, but in this case the same. – Arthur Kushman Aug 23 '13 at 13:11
  • what's the best way of keeping track of changes of this, ie. somebody clicked an inner-page link? – Rid Iculous May 10 '16 at 04:26
  • 6
    @RidIculous try this: $(window).on('hashchange',function(){ $('h1').text(location.hash.slice(1)); }); – Silvio Delgado Aug 11 '16 at 03:01
  • If the hash value may contain spaces or special characters, you might want to add `hash = hash && decodeURI(hash)` to get the original value – pholpar Jul 20 '21 at 05:16
216

You can use the .indexOf() and .substring(), like this:

var url = "www.aaa.com/task1/1.3.html#a_1";
var hash = url.substring(url.indexOf("#")+1);

You can give it a try here, if it may not have a # in it, do an if(url.indexOf("#") != -1) check like this:

var url = "www.aaa.com/task1/1.3.html#a_1", idx = url.indexOf("#");
var hash = idx != -1 ? url.substring(idx+1) : "";

If this is the current page URL, you can just use window.location.hash to get it, and replace the # if you wish.

Richard Garside
  • 85,699
  • 10
  • 79
  • 86
Nick Craver
  • 610,884
  • 134
  • 1,288
  • 1,151
72

Use 

window.location.hash

to retrieve everything beyond and including the #

Community
  • 1
  • 1
Real
  • 720
  • 5
  • 5
40

jQuery style:

$(location).attr('hash');
Valentin E
  • 1,323
  • 11
  • 11
11

You can use the following "trick" to parse any valid URL. It takes advantage of the anchor element's special href-related property, hash.

With jQuery

function getHashFromUrl(url){
    return $("<a />").attr("href", url)[0].hash.replace(/^#/, "");
}
getHashFromUrl("www.example.com/task1/1.3.html#a_1"); // a_1

With plain JS

function getHashFromUrl(url){
    var a = document.createElement("a");
    a.href = url;
    return a.hash.replace(/^#/, "");
};
getHashFromUrl("www.example.com/task1/1.3.html#a_1"); // a_1
David Murdoch
  • 85,416
  • 39
  • 144
  • 188
3

If you just have a plain url string (and therefore don't have a hash attribute) you can also use a regular expression:

var url = "www.example.com/task1/1.3.html#a_1"  
var anchor = url.match(/#(.*)/)[1]
DrewB
  • 3,113
  • 23
  • 22
  • 1
    Need to check that match gets results before accessing second element of it, or this code will error if the url has no anchor. – Richard Garside Jul 30 '19 at 08:53