How to remove the hash from window.location (URL) with JavaScript without page refresh?

Question

I have URL like: http://example.com#something, how do I remove #something, without causing the page to refresh?

I attempted the following solution:

window.location.hash = '';

However, this doesn't remove the hash symbol # from the URL.

It *is* possible. AJAX history libraries deal with it. But it's not easy, and it has to be done differently for almost every browser. Not something you wanna get into. — Gabriel Hurley, Sep 09 '09 at 03:14
Is there any conciderations with leaving a "#" behind other than a visual one? — user29660, Aug 16 '16 at 10:55
Possible duplicate of [Modify the URL without reloading the page](https://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page) — PayteR, Sep 10 '17 at 12:53
and [Remove fragment in URL with JavaScript w/out causing page reload](https://stackoverflow.com/q/269044) — djvg, Mar 30 '23 at 09:22

Andy E · Answer 1 · 2014-07-09T09:32:46.387

682

Solving this problem is much more within reach nowadays. The HTML5 History API allows us to manipulate the location bar to display any URL within the current domain.

function removeHash () { 
    history.pushState("", document.title, window.location.pathname
                                                       + window.location.search);
}

Working demo: http://jsfiddle.net/AndyE/ycmPt/show/

This works in Chrome 9, Firefox 4, Safari 5, Opera 11.50 and in IE 10. For unsupported browsers, you could always write a gracefully degrading script that makes use of it where available:

function removeHash () { 
    var scrollV, scrollH, loc = window.location;
    if ("pushState" in history)
        history.pushState("", document.title, loc.pathname + loc.search);
    else {
        // Prevent scrolling by storing the page's current scroll offset
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore the scroll offset, should be flicker free
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}

So you can get rid of the hash symbol, just not in all browsers — yet.

_{Note: if you want to replace the current page in the browser history, use replaceState() instead of pushState().}

edited Jul 09 '14 at 09:32

answered Mar 14 '11 at 12:38

Andy E

338,112
86
474
445

9

Use this line to make sure you don't lose the query string: history.pushState("", document.title, window.location.pathname + window.location.search); – Phil Kulak Mar 13 '12 at 15:56
6

@Phil: thanks for pointing that out, I've updated the answer accordingly. I'm too used to using pretty URLs. – Andy E Mar 13 '12 at 17:32
1

For older versions of IE, it seems you need to use document.documentElement instead of document.body. See this answer http://stackoverflow.com/a/2717272/359048 – jasonmcclurg Aug 14 '13 at 23:09
50

I suggest using replaceState instead of pushState, to not create an extra entry in the browser history. – Nico Oct 06 '13 at 13:12
Is there any difference between [location.hash=" ";] and calling the suggested function [removeHash();]. becoz for me, both are giving the same error at console as : [Error: 10 $digest() iterations reached. Aborting!] Any suggestion ? – NawazSE Sep 18 '14 at 05:38
I think history.pushState will not trigger **hashshange** whereas window.location.hash will. To me this event is very important, so just be careful – santiago arizti Oct 22 '18 at 23:16
@santiagoarizti: `history.pushState()` **will** trigger a *hashchange* event. The fiddle in my answer demonstrates this by toggling the disabled state of a button in the *hashchange* event. – Andy E Oct 23 '18 at 14:49
interesting, I made my own fiddle to demonstrate that it didn't work before I wrote a comment here... look: https://jsfiddle.net/k76qefn1/ – santiago arizti Oct 23 '18 at 15:20
ok, I inspected your fiddle and the "hashchange" event only triggers on the `href="#hash"` click, which is to be expected, but it doesn't trigger after `history.pushState` which is what I am warning people about – santiago arizti Oct 23 '18 at 15:26
1

@santiagoarizti: you're right, I just came to the same conclusion. I didn't inspect the code I wrote (7 years ago!) properly and missed that I was also toggling the state of the button when removing the hash. Since you are changing the hash manually, you could always trigger the event yourself, I suppose. – Andy E Oct 23 '18 at 15:30
In (at least) Firefox 63, you will need a full URL (including domain name) to satisfy security checks. `history.replaceState('', document.title, window.location.origin + window.location.pathname + window.location.search);` Note addition of "window.location.origin". The answer, as given above, does not work in Chrome 70, but this modification does. Tested in Firefox 63, Chrome 70, IE 11, Edge. – Neil Monroe Nov 02 '18 at 23:43
OK, it seems that the problem was underspecified by the original poster, so I need to specify: I need to have ABSOLUTE, AUTOCRATIC AND TYRANNICAL CONTROL over the following aspects of behavior INDEPENDENTLY: 1) the hash part of the URL in the location changing 2) the trailing # in the URL staying or being gone after `location.hash=""` 3) scrolling to the anchor 4) triggering of the hashchange event No one who cannot offer a reliable implementation of `setHash(hash, shouldChangeLocationBar, shouldHashRemain, shouldScroll, shouldTriggerEvent)` can claim to have solved The Problem. – Szczepan Hołyszewski Feb 27 '19 at 18:55
@Nico Your comment is very helpful for at time of back button because I don't want to back path with #string. Thank for my time-saving. – Bhavin Thummar May 29 '19 at 11:11

score 243 · Accepted Answer · edited Jul 31 '22 at 16:27

243

Initial question:

window.location.href.substr(0, window.location.href.indexOf('#'))

or

window.location.href.split('#')[0]

both will return the URL without the hash or anything after it.

With regards to your edit:

Any change to window.location will trigger a page refresh. You can change window.location.hash without triggering the refresh (though the window will jump if your hash matches an id on the page), but you can't get rid of the hash sign. Take your pick for which is worse...

MOST UP-TO-DATE ANSWER

The right answer on how to do it without sacrificing (either full reload or leaving the hash sign there) is up here. Leaving this answer here though with respect to being the original one in 2009 whereas the correct one which leverages new browser APIs was given 1.5 years later.

edited Jul 31 '22 at 16:27

Derek Adair

21,846
31
97
134

answered Sep 09 '09 at 03:06

Gabriel Hurley

39,690
13
62
88

27

This is just plain wrong, you can change window.location.hash and it will not trigger a refresh. – Evgeny Oct 31 '10 at 20:21
64

@Evgeny -- That's what my answer says. I explicitly say that changing window.location.hash won't trigger a refresh. "You can change window.location.hash without triggering the refresh (though the window will jump if your hash matches an id on the page)". – Gabriel Hurley Oct 31 '10 at 22:29
3

No page reload - that is in the question. This is not the answer as it requires/forces a page reload! – Ed_ May 28 '12 at 16:56
14

also think it should not be the ✓answer – abernier Jun 19 '12 at 13:38
1

@abernier Agreed, doesn't say how do to remove the hash from the URL, just the URL string. – Belladonna Apr 02 '13 at 17:01
2

If the href has a #, both the substr and split methods will work. But if the href has no #, the substr method returns empty string, while the split returns the href. – dlaliberte May 22 '13 at 20:49
1

@LittleBigBot obviously just: window.location = window.location.href.split('#')[0]; ... – AO_ Aug 09 '13 at 14:08
@smftre I think I meant that it doesn't specify how to remove the hash from `window.location`, but it just removes it from the string it returns. – Belladonna Aug 12 '13 at 19:18
4

This is not an answer to the OP question. – Bryce Nov 14 '13 at 23:42
"Leaving this answer here though with respect to being the original one in 2009 whereas the correct one which leverages new browser APIs was given 1.5 years later." The best answer should be at the top, not the first or whatever. This isn't about status. It's about getting the best information to people. Either edit this answer to include the better information or make the better information the accepted answer. – Trott Apr 21 '17 at 18:42
this is the correct answer and perfectly explained. – tfont Sep 06 '17 at 15:28
thanks for updating with the current answer later in the thread OP <3 – Thomas Oct 09 '17 at 15:16
@Evgeny `window.location.hash=""` will remove the hash id , but the hash at the end of the url will remain eg: `/index.html#id` becomes `/index.html#` – 27px Dec 05 '20 at 14:34
@dlaliberte if there is no delimeter in s string to split split() function will return the original string in an array not empty string eg: `"/index.html#id".split("#") // ["/index.html","id"]` and `"/index.html".split("#") // ["/index.html"]` – 27px Dec 05 '20 at 14:38

score 160 · Answer 3 · answered Mar 19 '18 at 22:54

160

(Too many answers are redundant and outdated.) The best solution now is this:

history.replaceState(null, null, ' ');

answered Mar 19 '18 at 22:54

Pacerier

86,231
106
366
634

11

use `history.pushState(null, null, ' ')` instead if you want to preserve history. – nichijou Jan 05 '19 at 12:47
16

It might be useful to explain what passing `null` for the `state` and `title` parameters ultimately does. – V. Rubinetti Feb 01 '19 at 14:46
2

A problem with this, and the rest, is that it doesn't trigger onhashchange, even though the hash is now empty when it wasn't before. – Curtis Sep 19 '19 at 21:46
8

In TypeScript, null is not allowed for the second parameter because the command takes a string. Mozilla recommends empty string. – Curtis Sep 19 '19 at 22:00
1

is this behavior documented somewhere? is it supported by all browsers/versions? – madd0 Feb 22 '21 at 11:56
That is the right answear. – Maik Lowrey Nov 30 '21 at 07:28
@Curtis null! should work as a "hack" – muzzletov Sep 09 '22 at 20:17
Also why does `' '` for url result in same page without hash? whereas e.g. `'hello'` replaces the last fragment of the url, and `''` does nothing. Is this documented somewhere? How reliably is it? – donquixote Apr 04 '23 at 16:49

score 50 · Answer 4 · edited Jan 22 '17 at 15:23

50

Simple and elegant:

history.replaceState({}, document.title, ".");  // replace / with . to keep url

edited Jan 22 '17 at 15:23

Community

1
1

answered Jan 26 '15 at 18:02

cprcrack

17,118
7
88
91

3

use a dot instead of a slash if you want to stay in the same directory – vahanpwns Jun 11 '15 at 14:00
1

Please update answer as regards @vahanpwns note, to use `.` instead of `/`. Using `/` changes the url to the root path. – Isaac Gregson Jun 26 '15 at 07:05
I've updated the answer for a better explanation of what's going on in the example – vahanpwns Jun 27 '15 at 21:37
5

Thanks for this answer, I modified to `history.replaceState({}, document.title, location.href.substr(0, location.href.length-location.hash.length));` for my use case. – Scott Jungwirth Oct 16 '15 at 23:43
6

This does not preserve url query. – Vladislav Kostenko Jun 26 '17 at 20:15
3

My use-case was also to replace instead of push, but this makes more sense to me: `history.replaceState(null, document.title, location.pathname + location.search);` – MDMower Oct 25 '17 at 06:57

score 30 · Answer 5 · edited Jul 03 '20 at 12:46

30

You can do it as below:

history.replaceState({}, document.title, window.location.href.split('#')[0]);

edited Jul 03 '20 at 12:46

Kerem

11,377
5
59
58

answered Sep 23 '18 at 12:53

METALHEAD

2,734
3
22
37

2

The starred answer didn't work for me in either case, but this one did. Thanks! – Devin B. Apr 29 '20 at 01:47

score 15 · Answer 6 · answered Aug 17 '16 at 18:05

15

This will remove the trailing hash as well. eg: http://test.com/123#abc -> http://test.com/123

if(window.history.pushState) {
    window.history.pushState('', '/', window.location.pathname)
} else {
    window.location.hash = '';
}

answered Aug 17 '16 at 18:05

Chris Gunawardena

6,246
1
29
45

This removes any query params present in the URL :( – kevgathuku Aug 02 '18 at 11:53
3

@kevgathuku you can add them back with location.search, eg: ` window.history.pushState('', '/', window.location.pathname + window.location.search)` – Chris Gunawardena Aug 02 '18 at 12:04

Rahul Gupta · Answer 7 · 2017-02-07T08:13:57.933

15

To remove the hash, you may try using this function

function remove_hash_from_url()
{
    var uri = window.location.toString();
    if (uri.indexOf("#") > 0) {
        var clean_uri = uri.substring(0, uri.indexOf("#"));
        window.history.replaceState({}, document.title, clean_uri);
    }
}

edited Feb 07 '17 at 08:13

answered Feb 07 '17 at 08:05

Rahul Gupta

9,775
7
56
69

Nibras Reeza · Answer 8 · 2015-02-07T18:03:46.757

6

How about the following?

window.location.hash=' '

Please note that am setting the hash to a single space and not an empty string.

Setting the hash to an invalid anchor does not cause a refresh either. Such as,

window.location.hash='invalidtag'

But, I find above solution to be misleading. This seems to indicate that there is an anchor on the given position with the given name although there isn't one. At the same time, using an empty string causes page to move to the top which can be unacceptable at times. Using a space also ensures that whenever the URL is copied and bookmarked and visited again, the page will usually be at the top and the space will be ignored.

And, hey, this is my first answer on StackOverflow. Hope someone finds it useful and it matches the community standards.

edited Feb 07 '15 at 18:03

answered Feb 07 '15 at 17:58

Nibras Reeza

127
1
6

10

Setting hash to whitespace still keeps the # at the end of the URL, I think the goal is to remove it altogether. – mahemoff Feb 04 '16 at 12:18
1

It trails a hash at the end of the URL. The question is how to remove that. – Gurmeet Singh Sep 11 '17 at 05:56
Yes how can we can remove # as well with hash string. – Bhavin Thummar May 29 '19 at 11:02
Even with something like `document.location.hash = "avalidtagthatdoesntconfusejavascriptanditsanexampleafterall"` it still makes it `#avalidtagthatdoesntconfusejavascriptanditsanexampleafterall` – RixTheTyrunt May 26 '22 at 13:15

score 6 · Answer 9 · answered Apr 02 '18 at 06:50

6

const url = new URL(window.location);
url.hash = '';
history.replaceState(null, document.title, url);

answered Apr 02 '18 at 06:50

Casey

1,802
3
22
35

2

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – rollstuhlfahrer Apr 02 '18 at 07:07

score 5 · Answer 10 · answered Feb 03 '20 at 07:42

5

function removeLocationHash(){
    var noHashURL = window.location.href.replace(/#.*$/, '');
    window.history.replaceState('', document.title, noHashURL) 
}

window.addEventListener("load", function(){
    removeLocationHash();
});

answered Feb 03 '20 at 07:42

Vimal Kumar

61
1
3

score 3 · Answer 11 · answered Jan 07 '16 at 16:58

<script type="text/javascript">
var uri = window.location.toString();
if (uri.indexOf("?") > 0) {
    var clean_uri = uri.substring(0, uri.indexOf("?"));
    window.history.replaceState({}, document.title, clean_uri);
}
</script>

put this code on head section

score 2 · Answer 12 · answered Jan 22 '20 at 17:02

2

I think, it would be more safe

if (window.history) {
    window.history.pushState('', document.title, window.location.href.replace(window.location.hash, ''));
} else {
    window.location.hash = '';
}

answered Jan 22 '20 at 17:02

Konstantin Lekh

61
3

score 1 · Answer 13 · answered Jun 22 '23 at 20:58

1

if (window.location.href.includes('#')) {
    const cleanedUrl = window.location.href.split('#')[0];
    window.history.replaceState(null, null, cleanedUrl);
}

answered Jun 22 '23 at 20:58

paulalexandru

9,218
7
66
94

score 0 · Answer 14 · edited Jan 15 '16 at 15:03

0

Try the following:

window.history.back(1);

edited Jan 15 '16 at 15:03

josliber

43,891
12
98
133

answered Jul 13 '13 at 10:10

Vishal Sharma

97
3

25

This doesn't answer the question if the user has come directly to the URL including the hash. – nickb Jan 05 '14 at 02:57
This trick is very useful when you just want create a link to previous page, but the link is hidden in bunch of js files. – ValidfroM Apr 15 '14 at 16:55
Exactly what I was looking for. This works perfectly to remove a hashtag just created by my web app in order to consume a value returned by a javasript function. – user278859 Jun 07 '18 at 05:53
Well what if ``? – RixTheTyrunt May 26 '22 at 13:10

score 0 · Answer 15 · answered Nov 29 '17 at 14:44

Here is another solution to change the location using href and clear the hash without scrolling.

The magic solution is explained here. Specs here.

const hash = window.location.hash;
history.scrollRestoration = 'manual';
window.location.href = hash;    
history.pushState('', document.title, window.location.pathname);

NOTE: The proposed API is now part of WhatWG HTML Living Standard

score 0 · Answer 16 · edited Jul 03 '20 at 12:56

0

$(window).on('hashchange', function (e) {
    history.replaceState('', document.title, e.oldURL);
});

edited Jul 03 '20 at 12:56

Kerem

11,377
5
59
58

answered Jun 05 '19 at 13:48

JohnMathew

508
1
5
21

score 0 · Answer 17 · answered May 17 '21 at 07:41

Building off one of the answers given above, use this:

var scrollV, scrollH
var loc = window.location;
scrollV = document.body.scrollTop;
scrollH = document.body.scrollLeft;
if ("pushState" in history) {
    history.pushState("", document.title, loc.pathname + loc.search);

    // Restore the scroll offset
    document.body.scrollTop = scrollV;
    document.body.scrollLeft = scrollH;

} else {
    loc.hash = "";

    // Restore the scroll offset
    document.body.scrollTop = scrollV;
    document.body.scrollLeft = scrollH;
}

score -5 · Answer 18 · answered Sep 27 '13 at 06:04

-5

You can replace hash with null

var urlWithoutHash = document.location.href.replace(location.hash , "" );

answered Sep 27 '13 at 06:04

Devang Bhagdev

633
2
8
14

1

The question asks "without causing the page to refresh", but this method does refresh the page. You should note this fact in your answer, so we don't all have to waste our time finding out firsthand that you're answering a different question than the one we're actually trying to get answered here. – Val Kornea Jan 09 '15 at 00:41
It does not refresh the page. – Ciprian Jul 01 '16 at 10:08
It does not refresh the page because it isn't updating the URL. `replace` returns a fresh new string and `location.href` remains the same. As soon as you do `location.href = urlWithouthHash` you will get the refresh. – adripanico Feb 04 '21 at 15:56

How to remove the hash from window.location (URL) with JavaScript without page refresh?

18 Answers18

Linked

Related