Remove hash from url

Question

I am ajax-ifying the pagination in one of me projects and since I want the users to be able to bookmarks the current page, I am appending the page number via hash, say:

onclick="callPage(2); window.location.hash='p=2'; return false;"

and thats on the hyperlink it works fine and everything, except, when the page number is 1, i dont want to URL to be /products#p=1, I just want it to be /products

I tried these variations:

window.location.hash='' works but the url is now like /products# and I dont quite the hash there.
not using window.location.hash at all, but when the user comes back to page 1 from, say page 3, he is in page one, but url is still /products#p=3 since I am not messing with the hash.
Google search on this led me to several minutes (about 15) of silly forums where the question was asked right, but answers were suggesting that the page jumps because the thread creator had a hash in href like <a href="#"> and he should use javascript:void(0) instead. (had they never heard of Ajax?)

So finally, I decided to make this thread, I found several similar threads here, but all the answers ls very similar to my second point.

so my big question still remains a question: How to kick the hash out of the URL and possibly out of the universe? (only for the first page!)

@iamserious: They are, if you use Markdown and not HTML to create those lists ;) — Felix Kling, Dec 22 '10 at 11:16
what exactly is the problem with /products# ? Looks ok to me — Maxim Sloyko, Dec 22 '10 at 12:04
@maksymko, I guess its just personal preference, but I would like a clean url, I mean, if there isn't anything after hash, why bother adding it in the first place? also, I was wondering if search bots look at ``/products`` and ``/products#`` as two different pages? — iamserious, Dec 22 '10 at 12:16
@iamserious I really doubt that search engines look at them differently. Since hash is never passed to the server it is immediately obvious, that content is the same. Empty hash indicates that the target position is the same. Our company's search even tries to determine if the links with different parameters are the same, and it is old as time, so I think modern engines can cope with that without any problems. I'd say this empty hash is more of a browser issue. — Maxim Sloyko, Dec 22 '10 at 13:41
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:53

score 95 · Answer 1 · edited Oct 02 '12 at 06:44

95

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

edited Oct 02 '12 at 06:44

JFK

40,963
31
133
306

answered Mar 10 '12 at 02:10

HoBa

3,442
5
26
33

just gave it a quick try, it's removing the query parameters too... not desirable! – iamserious Mar 12 '12 at 10:58
9

thanks, just what I needed (although granted, I do not mind removing the query parameters (which can, however, be maintained with no problem by simply adding the query string, e. g. `history.pushState('', document.title, window.location.pathname+window.location.search);`)) – arik Aug 27 '12 at 13:31
2

Good for new browsers, but IE9 and less doesn't support it. Just like to point that out. – jdepypere Apr 14 '13 at 13:05
4

This also creates a entry in the history (obviously). So when the user clicks the back button she will be on the same page. – enyo Mar 05 '14 at 17:24
9

history.replaceState( ... ) would probably be more appropriate if you're worried about @enyo problem – Richard Herries Feb 17 '15 at 19:35

score 68 · Accepted Answer · edited May 23 '17 at 12:02

68

Updated Answer:

Best way to achieve this is to follow Homero Barbosa's answer below:

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

... or, if you want to maintain the search parameters:

history.pushState("", document.title, window.location.pathname + window.location.search);

Original Answer, do not use this, badwrongfun:

var loc = window.location.href,
    index = loc.indexOf('#');

if (index > 0) {
  window.location = loc.substring(0, index);
}

... but that refreshes the page for you which seems a trifle rude after just arriving there. Grin and bear it seems to be the best option.

edited May 23 '17 at 12:02

Community

1
1

answered Dec 22 '10 at 11:35

wombleton

8,336
1
28
30

1

You can also compromise and settle for something like `/products#First` which is bit more elegant than `/products#p=1` :) – Shadow The GPT Wizard Dec 22 '10 at 12:05
this worked for me, you can also save the string again instead of changing the page: var hashIndex = userUrl.indexOf('#'); if (hashIndex > 0) { userUrl = userUrl.substring(0, hashIndex); } – benbyford Apr 10 '15 at 15:37
Below is a better answer!! – zardilior Jul 12 '15 at 03:23
3

history.pushState("", document.title, window.location.pathname); will also remove php query strings i.e. "?key=hello". How can we remove just the hash without removing the query string? – ray9209 Aug 03 '15 at 19:11
I'm getting undefined name "history" – Jhourlad Estrella Jul 27 '20 at 10:21

score 7 · Answer 3 · edited Jun 16 '16 at 08:51

7

Worked For me Perfectly

$(window).on('hashchange', function(e){
  window.history.pushState("", document.title, window.location.pathname);  
 // do something...
});

edited Jun 16 '16 at 08:51

Gandhi

11,875
4
39
63

answered Jun 16 '16 at 08:05

Ronak Bokaria

616
6
6

Best and simplest answer, by far. – Chaya Cooper Nov 11 '19 at 04:09

score 5 · Answer 4 · answered Sep 27 '13 at 06:00

5

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

answered Sep 27 '13 at 06:00

Devang Bhagdev

633
2
8
14

This has issues, like if the hash is a short word. – redolent Jul 01 '15 at 22:28

score 4 · Answer 5 · edited Jul 13 '16 at 13:38

4

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;
    }
}

edited Jul 13 '16 at 13:38

isherwood

58,414
16
114
157

answered Oct 28 '15 at 05:59

Mudassar ali

301
3
16

Please, add explanation to your answer. – Alex Oct 28 '15 at 06:24
1

This has been shamelessly copied from [this answer](https://stackoverflow.com/a/5298684/1150683). – Bram Vanroy Mar 01 '18 at 15:46

Remove hash from url

5 Answers5

Linked

Related