How can you check for a hash in a URL using JavaScript

Question

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      If anyone could point me in the right direction  that would be much appreciated

User · Answer

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 .. )

User · Answer

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 .. )

User · Answer

Have you tried this   if  url indexOf          -1           Url contains a        Where url is the URL you want to check  obviously

User · Answer

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

User · Answer

var requestedHash     window location hash substring 1  split     1        split     1

User · Answer

Have you tried this   if  url indexOf          -1           Url contains a        Where url is the URL you want to check  obviously

User · Answer

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

User · Answer

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

User · Answer

or there s a jquery selector      a href

User · Answer

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

User · Answer

Put the following    lt script type  text javascript  gt      if  location href indexOf         -1               Your code in here accessing the string like this            location href substr location href indexOf              lt  script gt

User · Answer

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

User · Answer

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

User · Answer

var requestedHash     window location hash substring 1  split     1        split     1

User · Answer

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

User · Answer

Put the following    lt script type  text javascript  gt      if  location href indexOf         -1               Your code in here accessing the string like this            location href substr location href indexOf              lt  script gt

User · Answer

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

User · Answer

You can parse urls using modern JS  var my url   new URL  http   www google sk foo boo 123 baz     my url hash     outputs  quot  baz quot  my url pathname     outputs  quot  moo quot   my url protocol      quot http  quot   my url search     outputs  quot  doo 123 quot   urls with no hash will return empty string

User · Answer

Simple   if window location hash         Fragment exists   else        Fragment doesn t exist

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

This is a simple way to test this for the current page URL     function checkHash          return  location hash   true   false

User · Answer

Simple   if window location hash         Fragment exists   else        Fragment doesn t exist

User · Answer

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

User · Answer

Put the following    lt script type  text javascript  gt      if  location href indexOf         -1               Your code in here accessing the string like this            location href substr location href indexOf              lt  script gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

window location hash    will return the hash identifier

User · Answer

Put the following    lt script type  text javascript  gt      if  location href indexOf         -1               Your code in here accessing the string like this            location href substr location href indexOf              lt  script gt

User · Answer

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

User · Answer

or there s a jquery selector      a href

User · Answer

Simple   if window location hash         Fragment exists   else        Fragment doesn t exist

User · Answer

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

User · Answer

Simple   if window location hash         Fragment exists   else        Fragment doesn t exist

User · Answer

You can parse urls using modern JS  var my url   new URL  http   www google sk foo boo 123 baz     my url hash     outputs  quot  baz quot  my url pathname     outputs  quot  moo quot   my url protocol      quot http  quot   my url search     outputs  quot  doo 123 quot   urls with no hash will return empty string

User · Answer

Have you tried this   if  url indexOf          -1           Url contains a        Where url is the URL you want to check  obviously

User · Answer

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

User · Answer

Have you tried this   if  url indexOf          -1           Url contains a        Where url is the URL you want to check  obviously

User · Answer

This is a simple way to test this for the current page URL     function checkHash          return  location hash   true   false

User · Answer

window location hash    will return the hash identifier

User · Answer

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

User · Answer

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

[javascript] How can you check for a #hash in a URL using JavaScript?

Examples related to javascript

Examples related to jquery

Examples related to anchor

Examples related to fragment-identifier