Clearing URL hash

Question

Visit stackoverflow.com/#_=_ and window.location.hash evaluates to #_=_. Fine.

Now execute window.location.hash = '' to clear the hash, and the URL becomes stackoverflow.com/#. (Notice the trailing #.)

Why is the # in window.location.hash inconsistently included or excluded? How can the # be removed from the URL without reloading the page?

(MDN says

[the hash is] the part of the URL that follows the # symbol, including the # symbol.

but that is not true for in the case of an empty hash.)

visiting `stackoverflow.com/#` also results in `window.location.hash === ''` so it's consistent behavior. — dev-null-dweller, Mar 10 '13 at 13:52
You are saying that manipulating `hash` with JavaScript leads to `#` in URL and empty `hash` property. Now visiting page with only `#` in URL also leads to empty `hash` property. `hash` property is filled only when there are other characters after `#` in URL and it is consistent behavior in all browsers. — dev-null-dweller, Mar 10 '13 at 14:00
I seem to recall that IE does not include the '#' as part of the location.hash -- just to point out some other inconsistency... — Claude, Mar 10 '13 at 14:05
ie seems to add 'file///' at the beginning when adding a # at the end of a url — 124697, Apr 09 '13 at 13:26
Possible duplicate of [How to remove the hash from window.location (URL) with JavaScript without page refresh?](https://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-url-with-javascript-without-page-r) — PayteR, Sep 10 '17 at 12:55

Randomblue · Accepted Answer · 2013-04-06T20:57:59.670

57

To answer the second question (removing the # without a page refresh):

history.pushState('', document.title, window.location.pathname);

edited Apr 06 '13 at 20:57

answered Mar 10 '13 at 14:19

Randomblue

112,777
145
353
547

3

Note: pushState is IE10 and above. – Jay Kyburz Oct 08 '13 at 10:50
5

I prefer `replaceState` to achieve this. – Banago Apr 13 '15 at 13:11
2

Is there any solution for IE9? I tried `window.location.href.replace( /#.*/, "");` but it reloads the page. – Pankit Kapadia May 13 '15 at 06:34

score 4 · Answer 2 · edited Jun 20 '20 at 09:12

Answering to your first question:

According to the window.location doc in Mozilla.org: "the part of the URL that follows the # symbol, if there is one, including the # symbol. Empty string if the url does not contain # or has nothing after the #."

Curiously, that document was just updated on 4/8/2013. Not sure if that was added after you checked the documentation.

By the way (and in reference to the answers), the window.location.hash and pushState are different concepts although close related.

Claude · Answer 3 · 2015-12-20T12:30:41.950

There are 2 things driving this behaviour:

"Setting the hash property navigates to the named anchor without reloading the document." (here)
"When you set the location object or any of its properties except hash[...]In JavaScript 1.1 and later, the effect of setting location depends on the user's setting for comparing a document to the original over the network." (here)

So basically, setting the hash property should never lead to a reload, setting any other property should lead to a reload (or perhaps an E-Tag/modified-since header check, depending on browser settings).

I would assume that for the sake of consistency, browser builders transform setting an empty hash, to setting '#' as hash. This way the url in the location bar does not lead to a reload. But this latter part is pure speculation.

Clearing URL hash

3 Answers3

Linked