Get hash value from url

Question

I'm trying to get the hash value after a link was clicked. Any ideas?

e.g.

The Link

index.html#needThis

This is my result:

index.htmlneedThis

How can I remove the 'index.html' ?

$('#myselector').on('click', 'a', function(){
    var hash = $(this).attr('href').replace('#', '') //get url
    console.log(hash);
})

Possible duplicate of http://stackoverflow.com/questions/1822598/getting-url-hash-location-and-using-it-in-jquery. You don't need to 'remove' the `index.html`, you need to grab only the hash. — Nadav S., Nov 12 '12 at 13:08
Why al all answers using `$(this).attr('href')`?! Use native JS where possible: `this.href` has the exact same value, withouth the need for another library or function calls. — Martijn, Aug 25 '16 at 10:27

Gabriele Petrioli · Accepted Answer · 2014-05-13T19:48:22.797

71

update

Modern browsers (not sure how back it goes) can extract the hash directly from anchor elements (so i added #5)

Take your pick ..

var hash = $(this).attr('href').split('#')[1];
var hash = $(this).attr('href').replace(/^.*?#/,'');
var href = $(this).attr('href'), hash = href.substr(href.indexOf('#')+1);
var hash = $(this).attr('href').match(/#(.*$)/)[1];
var hash = this.hash.substr(1);

update

Just revisited this and i believe that #2 can be improved to

$(this).attr('href').replace(/^.*?(#|$)/,'');

This way if no hash exists it will return empty instead of the whole url..

edited May 13 '14 at 19:48

answered Nov 12 '12 at 13:08

Gabriele Petrioli

191,379
34
261
317

The second is the perfect solution! No Exception : var hash = $(this).attr('href').replace(/^.*?#/,''); thank you @Gaby – Bellash Oct 29 '13 at 18:03
@gaby what is test in the 3. solution? – Tobias Oberrauch Nov 28 '13 at 13:22
@TobiasOberrauch, great eyes... I have corrected it ... (*it was supposed to be a temporary reference to the `href` string*) – Gabriele Petrioli Nov 28 '13 at 13:40
@Bellash just posted an improvement to it :) – Gabriele Petrioli Jan 13 '14 at 09:58

Kirill Ivlev · Answer 2 · 2012-11-12T13:11:04.577

16

Just use var hash = window.location.hash.

It returns everything after #

Or if you've got a variable which contains an url:

$(this).attr('href').substring($(this).attr('href').indexOf('#'))

edited Nov 12 '12 at 13:11

answered Nov 12 '12 at 13:05

Kirill Ivlev

12,310
5
27
31

Thank you for that but it's not working in my case because I need the href of the a-element which is triggered and not from the current url. :) – grindking Nov 12 '12 at 13:07
in that case use a.substring(a.indexOf('#')) – Kirill Ivlev Nov 12 '12 at 13:10
4

`window.location.hash` doesn't actually *return everything after #*, but *everything **starting from** #*, so # character is included. – Robo Robok Feb 08 '15 at 09:39

score 5 · Answer 3 · answered Nov 12 '12 at 13:08

5

You can try with window location hash.

$('#myselector').on('click', 'a', function(){
    var hash = $(this).attr('href').replace('#', '') //get url
    var hash2 = window.location.hash ;
    console.log(hash2);
})

answered Nov 12 '12 at 13:08

Wasim Shaikh

6,880
18
61
88

Thank you but the same problem as above. – grindking Nov 12 '12 at 13:09

score 2 · Answer 4 · answered Feb 08 '16 at 17:51

2

Why not simply use:

window.location.hash

Works just fine for me.

answered Feb 08 '16 at 17:51

jucedogi

46
4

score 1 · Answer 5 · answered Nov 12 '12 at 13:10

1

Try this,

$('#myselector').on('click', 'a', function(){
    var url = $(this).attr('href') //get url
    var arr = url.split('#');
    alert(arr[0]); //URL without hash #
    var hash = arr[1];
    console.log(hash);
})

answered Nov 12 '12 at 13:10

Muthu Kumaran

17,682
5
47
70

Get hash value from url

5 Answers5

Linked