How do I get the fragment identifier (value after hash #) from a URL?

Question

Example:

www.site.com/index.php#hello

Using jQuery, I want to put the value hello in a variable:

var type = …

I’m uncertain, whether this question should remain being tagged as jQuery and asking about it. Most of the answers apply to JS without jQuery and this seems like a good dupe target. — Sebastian Simon, Mar 02 '18 at 02:41

Musa · Accepted Answer · 2022-10-23T14:25:03.753

637

No need for jQuery

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

Since String.prototype.substr is deprecated use substring instead.

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

edited Oct 23 '22 at 14:25

answered Jul 26 '12 at 05:11

Musa

96,336
17
118
137

177

Not enough jQuery! (Just kidding: +1.) – nnnnnn Jul 26 '12 at 05:19
2

I just learned that a # can be used as 'hash' which works as an identifier / keyword in JavaScript. Awesome – Clain Dsilva Jan 15 '15 at 11:56
18

You can also use `.slice(1)` instead of `.substr(1)` which should offer a modest increase in performance, although it makes no difference in real life. – devius Jan 15 '15 at 15:46
5

OMG, how many times you'd need to check url hash to make ANY noticeable difference? A million? 'Modest increase' is a huge overstatement in this context. :-) – konrad Feb 04 '17 at 16:37
How about URL's from variables? This answer works only with current `window.location` value. – Arthur Shlain Sep 20 '21 at 14:36
@konrad plenty of websites get millions of page loads a day. – Kröw Jun 10 '22 at 15:45
@Kröw yes but we speak of client side code not server side. It doesn't matter unless one browser has to load millions of sites a day which in most cases it doesn't. :-) – konrad Jun 14 '22 at 13:07
@konrad Yes it does. – Kröw Jun 15 '22 at 22:18
@Kröw can you explain? – konrad Jun 23 '22 at 10:59
`substr` is deprecated. use `substring` or `slice` instead – Nicicalu Oct 23 '22 at 13:28

Ahsan Khurshid · Answer 2 · 2012-07-26T05:20:13.883

37

You may do it by using following code:

var url = "www.site.com/index.php#hello";
var hash = url.substring(url.indexOf('#')+1);
alert(hash);

SEE DEMO

edited Jul 26 '12 at 05:20

answered Jul 26 '12 at 05:13

Ahsan Khurshid

9,383
1
33
51

4

Note: indexOf is not supported by IE8 – Sebastiaan Ordelman Jun 10 '15 at 14:36
4

@SchalkKeun luckily, now in '18 it's almost gone. But for those who still have to deal with that legend should be aware of it. – Sebastiaan Ordelman Jun 22 '18 at 09:45
7

To be honest, IE8 is so insecure, all the payment gateways basically is going to drop any browser not supporting TLS 1.2 next week (30 June 2018), you will not be able to do payments from them at all. So that makes all these old crappy browsers useless for any ecommerce client. – Schalk Keun Jun 22 '18 at 12:05

Talha · Answer 3 · 2012-07-26T05:21:47.943

13

var url ='www.site.com/index.php#hello';
var type = url.split('#');
var hash = '';
if(type.length > 1)
  hash = type[1];
alert(hash);

Working demo on jsfiddle

edited Jul 26 '12 at 05:21

answered Jul 26 '12 at 05:15

Talha

18,898
8
49
66

The `if` statement can be shortened to `var hash = type[1] || "";`. – Sebastian Simon Mar 02 '18 at 02:40

score 8 · Answer 4 · edited Mar 17 '20 at 22:02

8

It's very easy. Try the below code

$(document).ready(function(){
  var hashValue = location.hash.replace(/^#/, '');  
  //do something with the value here  
});

edited Mar 17 '20 at 22:02

ByteFlowr

511
7
16

answered Sep 01 '14 at 09:30

kmario23

57,311
13
161
150

3

var hashValue = location.hash.replace(/^#/, ''); – flakerimi Sep 21 '15 at 10:59

score 8 · Answer 5 · answered Jan 29 '16 at 07:25

8

Use the following JavaScript to get the value after hash (#) from a URL. You don't need to use jQuery for that.

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

I have got this code and tutorial from here - How to get hash value from URL using JavaScript

answered Jan 29 '16 at 07:25

JoyGuru

1,803
20
11

score 5 · Answer 6 · answered Jun 26 '17 at 11:23

5

I had the URL from run time, below gave the correct answer:

let url = "www.site.com/index.php#hello";
alert(url.split('#')[1]);

hope this helps

answered Jun 26 '17 at 11:23

Manohar Reddy Poreddy

25,399
9
157
140

score 3 · Answer 7 · answered Dec 26 '21 at 22:10

Get fragment of current document location

var hash = window.location.hash;

Get fragment from string

// absolute
var url = new URL('https://example.com/path/index.html#hash');

console.log(url.hash);

// relative (second param is required, use any valid URL base)
var url2 = new URL('/path/index.html#hash2', 'http://example');

console.log(url2.hash);

Rohit L · Answer 8 · 2014-03-03T02:46:02.720

Based on A.K's code, here is a Helper Function. JS Fiddle Here (http://jsfiddle.net/M5vsL/1/) ...

// Helper Method Defined Here.
(function (helper, $) {
    // This is now a utility function to "Get the Document Hash"
    helper.getDocumentHash = function (urlString) {
        var hashValue = "";

        if (urlString.indexOf('#') != -1) {
            hashValue = urlString.substring(parseInt(urlString.indexOf('#')) + 1);
        }
        return hashValue;
    };
})(this.helper = this.helper || {}, jQuery);

How do I get the fragment identifier (value after hash #) from a URL?

8 Answers8

Linked

Related