939

I have some jQuery/JavaScript code that I want to run only when there is a hash (#) anchor link in a URL. How can you check for this character using JavaScript? I need a simple catch-all test that would detect URLs like these:

  • example.com/page.html#anchor
  • example.com/page.html#anotheranchor

Basically something along the lines of:

if (thereIsAHashInTheUrl) {
    do this;
} else {
    do this;
}
0

22 Answers 22

1654

Simple use of location hash:

if(window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}
Sign up to request clarification or add additional context in comments.

4 Comments

Additional: the .location object is only available on the current window's URL, you can't do this for an arbitrary URL (e.g. one stored in a string variable)
Also, location properties like .hash and .query are also available on <a> elements
.search is available on an <a>, not .query. Sample jQuery: $("<a/>").attr({ "href": "http://www.somewhere.com/a/b/c.html?qs=1#fragmenttest" })[0]. .hash => "#fragmenttest" and .search = ?qs=1. From there, hit up the querystring extraction question to get something other than a string.
Please note that window.location.hash is empty if url ends with '#'. It is ok if you are looking for hash, but not if you are checking if the current URL contains a #.
397
  if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
      alert (hash);
      // hash found
  } else {
      // No hash found
  }

Comments

59

Put the following:

<script type="text/javascript">
    if (location.href.indexOf("#") != -1) {
        // Your code in here accessing the string like this
        // location.href.substr(location.href.indexOf("#"))
    }
</script>

Comments

45

If the URI is not the document's location this snippet will do what you want.

var url = 'example.com/page.html#anchor',
    hash = url.split('#')[1];

if (hash) {
    alert(hash)
} else {
    // do something else
}

Comments

31

Have you tried this?

if (url.indexOf('#') !== -1) {
    // Url contains a #
}

(Where url is the URL you want to check, obviously.)

Comments

19
$('#myanchor').click(function(){
    window.location.hash = "myanchor"; //set hash
    return false; //disables browser anchor jump behavior
});
$(window).bind('hashchange', function () { //detect hash change
    var hash = window.location.hash.slice(1); //hash to string (= "myanchor")
    //do sth here, hell yeah!
});

This will solve the problem ;)

Comments

17
window.location.hash 

will return the hash identifier

Comments

10

...or there's a jquery selector:

$('a[href^="#"]')

Comments

10

You can parse urls using modern JS:

var my_url = new URL('http://www.google.sk/foo?boo=123#baz');

my_url.hash; // outputs "#baz"
my_url.pathname; // outputs "/moo"
​my_url.protocol; // "http:"
​my_url.search; // outputs "?doo=123"

urls with no hash will return empty string.

1 Comment

To expand this a bit more any string that uses query string based syntax (& & =) can be fully parsed efficiently also via: const params = new URLSearchParams(hash.substring(1)); which can then be used as params.get('param_name');
6

Here's what you can do to periodically check for a change of hash, and then call a function to process the hash value.

var hash = false; 
checkHash();

function checkHash(){ 
    if(window.location.hash != hash) { 
        hash = window.location.hash; 
        processHash(hash); 
    } t=setTimeout("checkHash()",400); 
}

function processHash(hash){
    alert(hash);
}

1 Comment

thats only nessesary in ie 6 + 7. Al other browsers have included the onhashchange event
5
var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);

Comments

5

Most people are aware of the URL properties in document.location. That's great if you're only interested in the current page. But the question was about being able to parse anchors on a page not the page itself.

What most people seem to miss is that those same URL properties are also available to anchor elements:

// To process anchors on click    
jQuery('a').click(function () {
   if (this.hash) {
      // Clicked anchor has a hash
   } else {
      // Clicked anchor does not have a hash
   }
});

// To process anchors without waiting for an event
jQuery('a').each(function () {
   if (this.hash) {
      // Current anchor has a hash
   } else {
      // Current anchor does not have a hash
   }
});

Comments

5
function getHash() {
  if (window.location.hash) {
    var hash = window.location.hash.substring(1);

    if (hash.length === 0) { 
      return false;
    } else { 
      return hash; 
    }
  } else { 
    return false; 
  }
}

Comments

3

Partridge and Gareths comments above are great. They deserve a separate answer. Apparently, hash and search properties are available on any html Link object:

<a id="test" href="foo.html?bar#quz">test</a>
<script type="text/javascript">
   alert(document.getElementById('test').search); //bar
   alert(document.getElementById('test').hash); //quz
</script>

Or

<a href="bar.html?foo" onclick="alert(this.search)">SAY FOO</a>

Should you need this on a regular string variable and happen to have jQuery around, this should work:

var mylink = "foo.html?bar#quz";

if ($('<a href="'+mylink+'">').get(0).search=='bar')) {
    // do stuff
}

(but its maybe a bit overdone .. )

Comments

3

Throwing this in here as a method for abstracting location properties from arbitrary URI-like strings. Although window.location instanceof Location is true, any attempt to invoke Location will tell you that it's an illegal constructor. You can still get to things like hash, query, protocol etc by setting your string as the href property of a DOM anchor element, which will then share all the address properties with window.location.

Simplest way of doing this is:

var a = document.createElement('a');
a.href = string;

string.hash;

For convenience, I wrote a little library that utilises this to replace the native Location constructor with one that will take strings and produce window.location-like objects: Location.js

Comments

2

I noticed that all of these answers mostly check window.location.hash and make it difficult to write tests.

 const hasHash = string => string.includes('#')

You can also remove the hash from a url like so:

const removeHash = string => {
 const [url] = string.split('#')
 return url
}

And finally you can combine the logic together:

if(hasHash(url)) {
 url = removeHash(url)
}

Comments

1

Usually clicks go first than location changes, so after a click is a good idea to setTimeOut to get updated window.location.hash

$(".nav").click(function(){
    setTimeout(function(){
        updatedHash = location.hash
    },100);
});

or you can listen location with:

window.onhashchange = function(evt){
   updatedHash = "#" + evt.newURL.split("#")[1]
};

I wrote a jQuery plugin that does something like what you want to do.

It's a simple anchor router.

Comments

1

Here is a simple function that returns true or false (has / doesn't have a hashtag):

var urlToCheck = 'http://www.domain.com/#hashtag';

function hasHashtag(url) {
    return (url.indexOf("#") != -1) ? true : false;
}

// Condition
if(hasHashtag(urlToCheck)) {
    // Do something if has
}
else {
    // Do something if doesn't
}

Returns true in this case.

Based on @jon-skeet's comment.

Comments

1

This is a simple way to test this for the current page URL:

  function checkHash(){
      return (location.hash ? true : false);
  }

Comments

0

Modern way, we can now safely in 2024 use the browser built-in URL api, who provides many tools for URL parsing.

Inspect the URL Object:

console.log( new URL(location) )

Get the URL hash:

new URL(location).hash

URL api support in 2024

https://caniuse.com/url

Comments

-1

Use :

var hash = window.location.hash;

var hash = hash.replace('#', '');

then the variable "hash" has the hash without "#"

2 Comments

This is basically the same as the accepted answer. And other answers show how to remove the # at the beginning if necessary.
As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
-2

sometimes you get the full query string such as "#anchorlink?firstname=mark"

this is my script to get the hash value:

var hashId = window.location.hash;
hashId = hashId.match(/#[^?&\/]*/g);

returns -> #anchorlink

2 Comments

Not possible as hash is appended after the query string and is never sent to server. The only time hash would appear before query string is when you modified the url by hand.
yep, but sometimes people send urls on this format. this is just so you can get only the hash value and neglect the others. :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.