93

I have:

var uri = window.location.href;

That provides http://example.com/something#hash

What's the best and easiest way to get the entire path without the #hash?

uri    = http://example.com/something#hash
nohash = http://example.com/something

I tried using location.origin+location.pathname which doesn't work in every browser. I tried using location.protocol+'//'+location.host+location.pathname which looks like kind of a crappy solution to me.

What is the best and easiest way to do so? maybe I query for location.hash and try to substr() this from the uri?

Phrogz
  • 284,740
  • 104
  • 634
  • 722
matt
  • 40,185
  • 99
  • 257
  • 397
  • 1
    BTW, if your doing this just to link to a `#section` on the same page, just set the link href to `#section`. You don't need to get the page's base url then concatenate the hash on the end. – Web_Designer Feb 25 '13 at 06:59

8 Answers8

105

location.protocol+'//'+location.host+location.pathname is the correct syntax if you do not care about port number or querystring

If you do care:

https://developer.mozilla.org/en/DOM/window.location

location.protocol+'//'+
  location.host+
  location.pathname+
 (location.search?location.search:"")

or

location.protocol+'//'+
  location.hostname+
 (location.port?":"+location.port:"")+
  location.pathname+
 (location.search?location.search:"")

You can also just do a location.href.replace(location.hash,"")
It will remove EVERYTHING from the FIRST # and on regardless of other hash characters in the string

Alternatively create a URL object:

const url = new URL("https://www.somepage.com/page.hmtl#anchor") //(location.href);
console.log(url)
url.hash="";
console.log(url)
mplungjan
  • 155,085
  • 27
  • 166
  • 222
  • You lost the query string (if there was one) there – Quentin Apr 28 '11 at 12:03
  • 1
    Seems like location.host is including port. – Borgenk Nov 23 '11 at 13:33
  • 15
    That last bit about `.replace(location.hash,'')` is brilliant and just what I was trawling for. –  Mar 01 '14 at 08:06
  • @GrigoryKalabin - should still work: `var url = "http://example.com#example"; var lnk = document.createElement("a"); lnk.href=url; alert(lnk.hash);` – mplungjan Mar 18 '15 at 12:42
  • @mplungjan oh, got it, hash property has leading `#`. Thanks! – Gregory Kalabin Mar 18 '15 at 12:55
  • 12
    location.href.replace(location.hash,"") will not work properly because: http://example.com#example# will give '' as hash; http://example.com#example#a will give '#a' as hash; window.location.href.split('#')[0] is a correct solution. – ZPiDER Aug 20 '15 at 17:04
  • 1
    The first solution has an issue: URLs like `https://example.com/foo?` will get transformed to ones without the question mark. Sometimes this causes issues. Your last method using the `URL` constructor seems to work fine, though, thanks! – mgol Dec 28 '21 at 22:32
90
var uri = window.location.href.split("#")[0];

// Returns http://example.com/something

var hash = window.location.hash;

// Returns #hash
Luc
  • 4,264
  • 2
  • 43
  • 44
Nick Brunt
  • 8,858
  • 8
  • 50
  • 81
18
location.href.replace(location.hash,"")
Quentin
  • 857,932
  • 118
  • 1,152
  • 1,264
  • `(location+'').href.replace(location.hash,"")` works in firefox (location is not a regular string) – Taha Jahangir Oct 08 '12 at 11:03
  • But care that `location.hash` is '' when url is somehting.com/# – Taha Jahangir Oct 08 '12 at 11:05
  • Surprisingly to me, this will not break if `location.hash` is contained elsewhere in the URL. For example, "http://www.example.com/#example". Because `location.hash` contains the leading "#". Except, when the hash is blank, as pointed out above. – Ben J Mar 07 '17 at 08:12
  • location.hash will contain EVERYTHING from the FIRST # to the end and ignore ANY subsequestion (illegal) url characters like # https://plungjan.name/SO/testhref.html - I tested because my answer was voted down – mplungjan Nov 13 '21 at 13:43
9

Is the universal way also the smaller?

location.href.split(/\?|#/)[0]
Mo.
  • 23,921
  • 35
  • 145
  • 210
Alain Beauvois
  • 5,766
  • 3
  • 42
  • 25
7

Shorter solutions:

  • without query string and hash location.href.split(location.search||location.hash||/[?#]/)[0]

  • only without hash location.href.split(location.hash||"#")[0]

(I usually use the first one)

Sebastien P.
  • 709
  • 7
  • 6
0

ES2020:

let [uri, hash] = location.href.split("#");
console.log(uri, hash);

location.hash = "#myhash";

[uri, hash] = location.href.split("#");
console.log(uri, hash);
RobertoNovelo
  • 2,743
  • 3
  • 21
  • 31
0

I was looking for this answer:

`${window.location.origin}${window.location.pathname}${window.location.search}`
Fred
  • 758
  • 9
  • 22
-3
location.href = window.location.href.split("write here your code to delete in your URL")[0] + "write here your final destination";
Joundill
  • 5,418
  • 11
  • 31
  • 47
  • Hi @Vittrix welcome to SO ! Please read [How to answer](https://stackoverflow.com/help/how-to-answer) , also try to include some notes about what your answer does differently or better compared to the already accepted answer ! – Pascal Lamers Jan 25 '21 at 22:23