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#anchorexample.com/page.html#anotheranchorBasically 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.
This question is related to
javascript
jquery
anchor
fragment-identifier
Have you tried this?
if (url.indexOf('#') !== -1) {
// Url contains a #
}
(Where url is the URL you want to check, obviously.)
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>
This is a simple way to test this for the current page URL:
function checkHash(){
return (location.hash ? true : false);
}
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.
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.
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;
}
}
Have you tried this?
if (url.indexOf('#') !== -1) {
// Url contains a #
}
(Where url is the URL you want to check, obviously.)
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);
}
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>
Have you tried this?
if (url.indexOf('#') !== -1) {
// Url contains a #
}
(Where url is the URL you want to check, obviously.)
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>
window.location.hash
will return the hash identifier
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
}
...or there's a jquery selector:
$('a[href^="#"]')
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.
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.
var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);
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 .. )
window.location.hash
will return the hash identifier
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
}
});
Have you tried this?
if (url.indexOf('#') !== -1) {
// Url contains a #
}
(Where url is the URL you want to check, obviously.)
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 .. )
$('#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 ;)
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>
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
$('#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 ;)
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
}
});
var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);
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
}
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.
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
}
...or there's a jquery selector:
$('a[href^="#"]')
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);
}
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;
}
}
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.
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
}
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
This is a simple way to test this for the current page URL:
function checkHash(){
return (location.hash ? true : false);
}
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
Source: Stackoverflow.com