217

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,799
  • 66
  • 75
  • 101
zjm1126
  • 34,604
  • 53
  • 121
  • 166

6 Answers6

558

For current window, you can use this:

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

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

var hash = window.top.location.hash.substring(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');
Pavel Vlasov
  • 4,206
  • 6
  • 41
  • 54
Silvio Delgado
  • 6,798
  • 3
  • 18
  • 22
  • 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
  • 7
    @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
218

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
  • 87,839
  • 11
  • 80
  • 93
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
76

Use 

window.location.hash

to retrieve everything beyond and including the #

Community
  • 1
  • 1
Real
  • 760
  • 5
  • 5
41

jQuery style:

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

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
  • 87,823
  • 39
  • 148
  • 191
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,231
  • 24
  • 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