如何在JavaScript中提取URL的主机名部分

Question

如何在JavaScript中提取URL的主机名部分

453

有没有一种非常简单的方法可以从完整的URL开始：

document.location.href = "http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah"

提取目标是仅包含主机部分：

aaa.bbb.ccc.com

肯定有一个可靠的JavaScript函数可以做到这一点，但我找不到它。

- Dustin Getz

15个回答

169

你可以将协议和主机名拼接起来：

var root = location.protocol + '//' + location.host;

假设有一个URL地址，例如'http://stackoverflow.com/questions'，它将返回'http://stackoverflow.com'

- Christian C. Salvadó

6

为了实现上述结果，似乎应该使用“hostname”而不是“host”。来源：https://dev59.com/i2w15IYBdhLWcg3wQ5hi - user417669

您可以使用location.origin来获得相同的结果。 - Sérgio

2

原始问题并未要求URL的协议部分。 - Simon East

1

hostname和host之间的区别在这里展示；host可能包括**port**，而hostname不包括port。我认为Christian在这里使用了location.host，所以var root的值将包括port值（如果有的话）。正如@Sérgio所说，为什么var root = location.protocol + '//' + location.host 等同于 location.origin; - Nate Anderson

57

接受的答案对我没有用，因为我想能够处理任意的URL而不仅仅是当前页面的URL。

看一下URL对象：

var url = new URL("http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah");
url.protocol;  // "http:"
url.hostname;  // "aaa.bbb.ccc.com"
url.pathname;  // "/asdf/asdf/sadf.aspx"
url.search;    // "?blah"

- Martin Konecny

2

这里有两个答案之一，不假设你在浏览器端... - Will59

1

它在Microsoft Internet Explorer 11中不起作用。无论如何还是谢谢。 - gouessej

36

使用 document.location 对象及其 host 或 hostname 属性。

alert(document.location.hostname); // alerts "stackoverflow.com"

- n1313

27

有两种方法。第一种方法是另一个答案的变体，但此方法考虑了非默认端口：

function getRootUrl() {
  var defaultPorts = {"http:":80,"https:":443};

  return window.location.protocol + "//" + window.location.hostname
   + (((window.location.port)
    && (window.location.port != defaultPorts[window.location.protocol]))
    ? (":"+window.location.port) : "");
}

但我更喜欢这种更简单的方法（适用于任何URI字符串）：

function getRootUrl(url) {
  return url.toString().replace(/^(.*\/\/[^\/?#]*).*$/,"$1");
}

- danorton

3

谢谢！我也更喜欢第二种方法！特别是在服务器端JavaScript中，无法获取window.location:) - trillions

这里有两个答案之一，它们不假设您在浏览器端处理事情...但是请检查Martin Konecny更近期的回答，使用新的URL。 - Will59

12

假设您有这个URL路径：

http://localhost:4200/landing?query=1#2

因此，您可以通过以下位置值为自己提供服务：

window.location.hash: "#2"

window.location.host: "localhost:4200"

window.location.hostname: "localhost"

window.location.href: "http://localhost:4200/landing?query=1#2"

window.location.origin: "http://localhost:4200"

window.location.pathname: "/landing"

window.location.port: "4200"

window.location.protocol: "http:"

window.location.search: "?query=1"

现在我们可以得出结论，您正在寻找：

window.location.hostname

- Sunil Shakya

8

尝试

document.location.host

或者

document.location.hostname

- Chris Nielsen

7

使用

window.location.origin

对于： "http://aaa.bbb.ccc.ddd.com/sadf.aspx?blah"

你将得到：http://aaa.bbb.ccc.ddd.com/

- Idan Wender

这很棒，但请注意，显然它在IE11 + WIN7上无法正常工作 https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4526233/ - Aurelio

3

我知道有点晚，但是我写了一个简洁的函数，使用了一些ES6语法

function getHost(href){
  return Object.assign(document.createElement('a'), { href }).host;
}

它也可以用ES5编写，例如：

function getHost(href){
  return Object.assign(document.createElement('a'), { href: href }).host;
}

当然，IE不支持Object.assign，但在我的工作范围内，这并不重要。

- Noah Cardoza

3

请检查以下内容：

alert(window.location.hostname);

这将返回主机名为www.domain.com 还有：

window.location.host

将返回带有端口的域名，例如www.example.com:80

完整参考请查看Mozilla开发者网站。

- code.rider

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amin Saqi · Accepted Answer

假设您有一个地址为：http://sub.domain.com/virtualPath/page.htm 的网页。

在页面代码中使用以下内容可以实现以下结果：

属性	结果
`window.location.host`	`sub.domain.com:8080` 或 `sub.domain.com:80`
`window.location.hostname`	`sub.domain.com`
`window.location.protocol`	`http:`
`window.location.port`	`8080` 或 `80`
`window.location.pathname`	`/virtualPath`
`window.location.origin`	`http://sub.domain.com`（可能会包括 `:port`*****）

更新：关于 .origin

***** 根据参考文献，浏览器对window.location.origin的兼容性不明确。我在 Chrome 中进行了检查，如果端口不是 80，则会返回http://sub.domain.com:port，如果端口是 80，则返回http://sub.domain.com。

特别感谢 @torazaburo 提醒我。