221

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?

1
  • Short: window.location.hash.substring(1) or window.location.hash.split('#').pop();
    – Avatar
    Commented Sep 29, 2022 at 12:20

6 Answers 6

565

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');
5
  • 1
    Elegant answer. Are there any cases in which this doesn't work?
    – sscirrus
    Commented May 27, 2013 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. Commented Aug 23, 2013 at 13:11
  • what's the best way of keeping track of changes of this, ie. somebody clicked an inner-page link? Commented May 10, 2016 at 4:26
  • 7
    @RidIculous try this: $(window).on('hashchange',function(){ $('h1').text(location.hash.slice(1)); }); Commented Aug 11, 2016 at 3: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
    Commented Jul 20, 2021 at 5: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.

2
  • 11
    Please note: to get the hash value of the main window from inside an iFrame, you must use window.top.location.hash instead. Commented Jul 17, 2013 at 13:00
  • 2
    url.split("#").pop() - Slower but easier.
    – Ifch0o1
    Commented Feb 1, 2019 at 10:28
78

Use

window.location.hash

to retrieve everything beyond and including the #

1
  • 19
    Remember to use location.hash.slice(1) if you don't want the hash tag in the final string! Commented Sep 23, 2013 at 23:10
41

jQuery style:

$(location).attr('hash');
2
  • 7
    not every javascript problem needs to be solved with jquery.
    – doxin
    Commented Dec 27, 2015 at 17:56
  • 31
    @doxin I agree but the question is "How to get the anchor from the URL using jQuery?"
    – Valentin E
    Commented Dec 28, 2015 at 15:53
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
0
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] 
1
  • 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. Commented Jul 30, 2019 at 8:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.