JavaScript窗口位置href不带哈希符号？

Question

我有：

var uri = window.location.href;

这提供了http://example.com/something#hash

如何最好最简单地获取没有#hash的整个路径？

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

我尝试使用location.origin+location.pathname，但它并不适用于所有浏览器。我也尝试了location.protocol+'//'+location.host+location.pathname，但这种方法看起来有点糟糕。

有没有更好、更简单的方法呢？也许我可以查询location.hash并从URI中截取它？

- matt

---

顺便说一下，如果你只是为了链接到同一页上的“#section”，只需将链接href设置为“#section”即可。你不需要获取页面的基本URL，然后在末尾连接哈希。 - Web_Designer

Answer 1

location.protocol+'//'+location.host+location.pathname是正确的语法，如果您不关心端口号或查询字符串。

如果您关心，请参考：https://developer.mozilla.org/en/DOM/window.location

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

或者

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

你也可以执行 location.href.replace(location.hash,"") 来移除字符串中第一个 # 及其后面的所有内容，无论字符串中是否还有其他 # 字符。
或者创建一个 URL 对象。

const url = new URL("https://www.somepage.com/page.hmtl#anchor") //(location.href);
console.log(url)
url.hash="";
console.log(url)

- mplungjan

---

似乎location.host包含端口。 - Borgenk

关于.replace(location.hash,'')的最后一段话真是太棒了，正是我一直在搜寻的。 - user241244

@mplungjan 哦，明白了，哈希属性有前导#。谢谢！ - Gregory Kalabin

location.href.replace(location.hash,"") 不能正常工作，因为：http://example.com#example# 会将''作为哈希值； http://example.com#example#a 会将'#a'作为哈希值；window.location.href.split('#')[0] 是一个正确的解决方案。 - ZPiDER

第一种解决方案存在问题：像 https://example.com/foo? 这样的 URL 会被转换为没有问号的 URL。有时这会引起问题。不过，你最后使用的 URL 构造函数的方法似乎很好用，谢谢！ - mgol

Answer 2

var uri = window.location.href.split("#")[0];

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

var hash = window.location.hash;

// Returns #hash

- Nick Brunt

---

这个数组的第二部分不包括井号。 - Brian Leishman

我已经包含了一个修复！ :-) - Caverna

这不管用。"foo#bar#baz".split("#") == "bar" - rgov

使用location.hash来获取哈希值。 - Sumit

Answer 3

location.href.replace(location.hash,"")

- Quentin

---

(location+'').href.replace(location.hash,"") 在 Firefox 中有效（location 不是一个普通的字符串） - Taha Jahangir

但要注意，当URL为something.com/#时，location.hash为空。 - Taha Jahangir

令我惊讶的是，如果location.hash在URL的其他位置中包含，它将不会中断。例如，“http://www.example.com/#example”。因为`location.hash`包含前导“#”。但是，正如上面指出的那样，当哈希为空时除外。 - Ben J

location.hash将包含从第一个#到末尾的所有内容，并忽略任何后续（非法）URL字符，如# https://plungjan.name/SO/testhref.html-我进行了测试，因为我的答案被投票否决。 - mplungjan

Answer 4

普适的方法也是更小的吗？

location.href.split(/\?|#/)[0]

- Alain Beauvois

---

这也会移除查询参数，而不仅仅是哈希值。如果只想移除哈希值，可以使用 location.href.split('#')[0]。 - undefined

Answer 5

更短的解决方案：

• 没有查询字符串和哈希 location.href.split(location.search||location.hash||/[?#]/)[0]

• 仅没有哈希 location.href.split(location.hash||"#")[0]

(我通常使用第一个)

- Sebastien P.

Answer 6

我正在寻找这个答案：

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

- Fred

Answer 7

我是一个支持尽可能让原生代码来处理繁重任务的粉丝。我开始认为，浏览器可以比我们更好地识别URL的各个部分，而不是我们凭感觉猜测。所以这里有另一种变体供您考虑：

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

我猜这需要一点解释：正在发生的是我们正在使用当前URL作为基础构建一个带有空哈希的URL对象，也就是说，如果存在哈希，则会被替换为空。然后，我们从隐式转换的字符串（URL对象的href）中移除最后一个字符（'#'）。

- Christoph142

Answer 8

ES2020：

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

location.hash = "#myhash";

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

- RobertoNovelo

Answer 9

我更喜欢直接返回所需结果而不是创建一个数组的简短代码。 要仅删除哈希（#hash）：

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

要同时删除哈希（#哈希）和查询参数（?查询=值&...），请执行以下操作：

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

这是用于替换从第一个?或#开始的所有字符直到字符串末尾的正则表达式(/.../)，替换为空字符串('')。

- cprcrack

Answer 10

location.href = window.location.href.split("write here your code to delete in your URL")[0] + "write here your final destination";

- Vittrix

---

嗨@Vittrix，欢迎来到SO！请阅读如何回答，并尝试包含一些关于你的答案与已被接受的答案有何不同或更好的注释！ - Pascal Lamers