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

Question

有一个非常简单的方法，从一个完整的URL开始：

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

而且只提取主机部分：

aaa.bbb.ccc.com 

有总得做一个可靠的JavaScript功能，但我找不到它。

Answer 1

假设你有一个页面，这个地址：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 *****

更新：关于.origin

*****至于window.location.origin的ref状态，浏览器兼容性不明确。我已经检查过它在铬中，它返回http://sub.domain.com:port如果端口是80而没有任何东西，并且http://sub.domain.com如果端口是80.

特别感谢@torazaburo提到我。

Answer 2

尝试

document.location.host 

或

document.location.hostname 

Answer 3

你可以串连位置协议和主机：

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

的URL，让说'http://stackoverflow.com/questions'，它将返回'http://stackoverflow.com'

Answer 4

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

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

Answer 5

有两种方法。首先是这里的另一个答案的一个变体，但是这一次占非默认端口：

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

Answer 6

检查这样的：

alert(window.location.hostname); 

这将返回主机名www.domain.com

和：

window.location.host 

将端口返回域名如www.example.com:80

有关完整的参考检查Mozilla developer网站。

Answer 7

使用

window.location.origin

和 “http://aaa.bbb.ccc.ddd.com/sadf.aspx?blah”

您将获得：http://aaa.bbb.ccc.ddd.com/

Answer 8

还有一个黑客我使用，从未在任何StackOverflow响应中看到： 使用图像的“src”属性将产生您的网站的完整基本路径。 例如：

var dummy = new Image; 
dummy.src = '$';     // using '' will fail on some browsers 
var root = dummy.src.slice(0,-1); // remove trailing '$' 

像http://domain.com/somesite/index.html的URL， root将被设置为http://domain.com/somesite/。 这也适用于本地主机或任​​何有效的基本URL。

请注意，这将导致$哑图像上的HTTP请求失败。 您可以使用现有的图像来避免这种情况，只需轻微更改代码即可。

另一个变例使用虚设链，对HTTP请求无副作用：

var dummy = document.createElement ('a'); 
dummy.href = ''; 
var root = dummy.href; 

我没有测试它在所有的浏览器，但。

Answer 9

我想指定一些东西。如果有人想与路径的整个URL像我所需要的，可以使用：

var fullUrl = window.location.protocol + "//" + window.location.hostname + window.location.pathname; 

Answer 10

接受的答案并没有为我工作，因为希望能够与任何arbitary的URL，而不仅仅是当前页面的工作URL。

看看在URL object：

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" 

Answer 11

正如马丁所说，其他的答案不会任意网址。新的URL object可以工作，但仍然是实验性的，并且与所有浏览器不兼容。

对于更可靠和跨浏览器的解决方案，您可以使用我构建的this component将任意url解析为与上述URL对象中类似的属性。

例如：

var urlObject = parseUrl('http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah'); 
var newUrl = urlObject.hostname; 

NEWURL现在将包含：

aaa.bbb.ccc.com 

可以导入使用的parseURL（）

Answer 12

我知道这是一个有点晚分量，但我用一点ES6语法做了一个干净的小功能

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

它也可以在ES5被writen像

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

当然IE doen't支持Object.assign，但在我的工作中，这并不重要。