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

javascript

prompt-engineering

functions

callbacks

byAlex Kataev·Dec 6, 2024

You can check the URL hash by utilizing the window.location.hash property in JavaScript. This property returns a hash string, # included, or an empty string if no hash is detected. To quickly obtain the hash value without the #, you can use the following approach:

var hash = window.location.hash;
console.log(hash ? `Hash: ${hash.slice(1)}` : 'No hash'); // It's like a treasure hunt, right?

Understanding the basics

Checking hash presence and conditions

You can use conditional if/else logic to execute code based on the presence or absence of a hash:

if(window.location.hash) {
    // There's a hash! Run your code here.
} else {
    // No hash detected. Engage alternative protocol.
}

Getting hash without '#'

Easily access the hash value without the # by applying substring(1):

var hashValue = window.location.hash.substring(1); // Hash slide, anyone?

Trivia of magical methods

Validating hash in URL string

You can validate if a hash is present by using location.href.indexOf("#"):

var hasHash = location.href.indexOf("#") > -1; // A bit of old-school flair

Capturing complete hash

To capture the complete hash value after '#', you can use:

var fullHash = location.href.substr(location.href.indexOf("#")); // Ever been on a substring rollercoaster? Hold tight!

Splitting the URL

Another method involves splitting the URL and checking if a hash exists:

var parts = window.location.href.split('#');
var hash = parts.length > 1 ? parts[1] : null; // Cutting URLs into pieces, one hash at a time

Pro tips

Watching hash changes

Remember that changes to the hash do not trigger a page reload, but you can readily listen for hash changes with the hashchange event:

window.addEventListener('hashchange', function() {
    console.log("Hash morphed into:", window.location.hash); // Hash mutant alert!
});

Beware, older browsers

The window.location.hash is fully supported in all modern browsers, but rethink if your target audience includes patrons of older browser versions.

Dealing with URL encoding

Mind the URL encoding; hashes may contain encoded characters that you'd need to defog with decodeURI() or decodeURIComponent().

Visualization

We are visual creatures. Let's picture the process of checking for a hash in a URL:

URL Example: 'https://example.com/page#section2'

🔍🕵️‍♂️ URL Inspector Method: window.location.hash

The inspector extracts the hash if it's present:

window.location.hash == '#section2'

🔍👉 Hash Extracted: #section2

Hash Inspection Results:
No Hash? [🚫🔍] => Result: ''
Hash Detected? [✅🔍] => Result: '#section2'

In single-page applications (SPAs), using hashes in navigation is quite common to maintain scroll positions or load dynamic content without page refresh.

SEO and hash usage

Be careful with your hash utilisation, as it can affect SEO. Search engines tend to ignore URL fragments which can take a toll on your website's crawlability.