102

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?

1
  • 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. Feb 25, 2013 at 6:59

10 Answers 10

112

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)

7
  • You lost the query string (if there was one) there
    – Quentin
    Apr 28, 2011 at 12:03
  • 1
    Seems like location.host is including port.
    – Borgenk
    Nov 23, 2011 at 13:33
  • 17
    That last bit about .replace(location.hash,'') is brilliant and just what I was trawling for.
    – user241244
    Mar 1, 2014 at 8:06
  • 14
    location.href.replace(location.hash,"") will not work properly because: example.com#example# will give '' as hash; example.com#example#a will give '#a' as hash; window.location.href.split('#')[0] is a correct solution.
    – ZPiDER
    Aug 20, 2015 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, 2021 at 22:32
93
var uri = window.location.href.split("#")[0];

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

var hash = window.location.hash;

// Returns #hash
4
  • 3
    The hash sign isn't included in the second part of that array Oct 11, 2016 at 18:41
  • I did include a fix! :-)
    – Caverna
    May 23, 2017 at 17:26
  • 3
    This doesn't work. "foo#bar#baz".split("#") == "bar"
    – rgov
    Mar 7, 2018 at 15:59
  • 6
    For hash, just use location.hash.
    – Sumit
    Aug 7, 2018 at 9:09
21
location.href.replace(location.hash,"")
4
  • (location+'').href.replace(location.hash,"") works in firefox (location is not a regular string) Oct 8, 2012 at 11:03
  • But care that location.hash is '' when url is somehting.com/# Oct 8, 2012 at 11:05
  • Surprisingly to me, this will not break if location.hash is contained elsewhere in the URL. For example, "example.com/#example". Because location.hash contains the leading "#". Except, when the hash is blank, as pointed out above.
    – Ben J
    Mar 7, 2017 at 8:12
  • location.hash will contain EVERYTHING from the FIRST # to the end and ignore ANY subsequestion (illegal) url characters like # plungjan.name/SO/testhref.html - I tested because my answer was voted down
    – mplungjan
    Nov 13, 2021 at 13:43
9

Is the universal way also the smaller?

location.href.split(/\?|#/)[0]
1
  • That also removes the query params, not just the hash. To remove only the hash: location.href.split('#')[0]
    – cprcrack
    Nov 20 at 17:32
8

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)

1

I was looking for this answer:

`${window.location.origin}${window.location.pathname}${window.location.search}`
1

I'm a fan of letting native code do the heavy lifting as much as possible. I'd come to think that a browser can recognize the parts of URLs better than us doing a best guess. So here's another variant for your consideration:

new URL('#', location.href).slice(0, -1)

I guess this needs a litte explanation: What's happening is we're constructing a URL object with an empty hash on the current URL as base, i.e. if there is a hash, it gets replace by an empty one. We then remove the last character ('#') from the implicitly cast string (href of the URL object).

0

ES2020:

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

location.hash = "#myhash";

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

0

I prefer this short one-liners which directly return the wanted result instead of creating an array.

To remove only the hash (#hash):

location.href.replace(/#.*$/, '')

To remove both the hash (#hash) and the query params (?query=value&...):

location.href.replace(/(\?|#).*$/, '')

This is regex (/.../) for replacing from the first ? (\?) or ((...|...)) # (#), all characters (.*) until the end of the string ($), by an empty string ('').

-3
location.href = window.location.href.split("write here your code to delete in your URL")[0] + "write here your final destination";
1
  • Hi @Vittrix welcome to SO ! Please read How to answer , also try to include some notes about what your answer does differently or better compared to the already accepted answer !
    – turbopasi
    Jan 25, 2021 at 22:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.