Introduction

In JavaScript, checking whether a URL contains a hash is usually as simple as reading window.location.hash. If a hash exists, that property contains the fragment starting with #; if not, it is an empty string.

That sounds trivial, but it helps to understand the difference between "does a hash exist," "what is the hash value," and "how do I react when the hash changes." Those are related but not identical tasks.

Use window.location.hash

The fragment portion of the current URL is available on window.location.hash.

console.log(window.location.hash);

Examples:

• 'https://example.com/page#section1 gives #section1'
• 'https://example.com/page gives an empty string'

To check whether a hash is present:

1if (window.location.hash) {
2  console.log("hash exists:", window.location.hash);
3} else {
4  console.log("no hash present");
5}

This works because an empty string is falsy in JavaScript.

Check a Specific URL String

If you are not inspecting the current browser location and instead have a URL string, use the URL API.

1const url = new URL("https://example.com/docs#intro");
2
3if (url.hash) {
4  console.log(url.hash);
5}

This is better than manual string parsing because it understands URL structure and avoids brittle substring logic.

If you only need a quick string check, includes("#") works, but it is more primitive:

const raw = "https://example.com/docs#intro";
console.log(raw.includes("#"));

That can tell you whether the character exists, but not whether the URL is otherwise well formed.

React to Hash Changes

In browser applications, the more useful question is often whether the hash changed while the page stayed loaded.

Use the hashchange event:

window.addEventListener("hashchange", () => {
  console.log("new hash:", window.location.hash);
});

This is useful for:

• tab-like interfaces
• in-page navigation
• lightweight single-page routing
• restoring view state without a full reload

If your application depends on fragment-based navigation, handling this event is usually more useful than checking the hash only once at startup.

Read the Hash Without the #

Sometimes you want just the fragment value.

const fragment = window.location.hash.slice(1);
console.log(fragment);

If the URL is #settings, slice(1) returns settings.

This is common when mapping hash values to section names or route names.

Set or Update the Hash

You can also change the fragment directly.

window.location.hash = "profile";

That updates the URL to include #profile and usually triggers a hashchange event.

If you want to change the visible URL fragment without adding extra history entries, history.replaceState may be a better fit in more advanced cases. But for simple fragment navigation, assigning to location.hash is enough.

Common Pitfalls

The biggest mistake is overcomplicating the check. For the current page, window.location.hash already gives you the answer.

Another common issue is forgetting that the returned value includes the leading #. If you compare it to a route name or section id, strip the first character first.

People also use includes("#") on arbitrary strings when what they really want is structured URL parsing. If the input is meant to be a URL, prefer the URL API.

Finally, checking once at page load is not enough for applications that change the fragment dynamically. Use hashchange when you care about updates over time.

Summary

• Use window.location.hash to check the hash on the current page.
• A present hash returns a string such as #section1; no hash returns "".
• Use the URL API when checking a URL string rather than the current browser location.
• Use hashchange to react to fragment updates.
• Strip the leading # with slice(1) when needed.
• Prefer structured URL parsing over manual string manipulation when possible.