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

有一个真正简单的方法从完整的URL开始:

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

并提取主机部分:

 aaa.bbb.ccc.com 

有一个可靠的JavaScript函数,但我找不到它。

    假设您有一个包含此地址的页面: http://sub.domain.com/virtualPath/page.htm : http://sub.domain.com/virtualPath/page.htm 。 在页面代码中使用以下来实现这些结果:

    • window.location.host :你会得到sub.domain.com:8080sub.domain.com:80
    • window.location.hostname :你会得到sub.domain.com
    • window.location.protocol :你会得到http:
    • window.location.port :你会得到808080
    • window.location.pathname :你会得到/virtualPath
    • window.location.origin :你会得到http://sub.domain.com *****

    更新:关于.origin

    *****作为参考状态,浏览器兼容性window.location.origin不清楚。 我已经检查了铬,它返回http://sub.domain.com:port如果端口是什么,但80,和http://sub.domain.com如果端口是80。

    特别感谢@torazaburo向我提到这一点。

    您可以连接位置协议和主机:

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

    对于一个URL,让说'http://stackoverflow.com/questions' ,它会返回'http://stackoverflow.com'

    使用document.location对象及其hosthostname属性。

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

    有两种方法。 第一个是这里另一个答案的变体,但是这个是非默认端口:

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

    但我更喜欢这个更简单的方法(可以与任何URIstring一起使用):

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

    尝试

     document.location.host 

    要么

     document.location.hostname 

    使用

    window.location.origin

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

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

    还有另一个黑客使用,从来没有见过任何StackOverflow响应:使用图像的“src”属性将产生您的网站的完整的基本path。 例如 :

     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。

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

    另一个变体使用虚拟链接,对HTTP请求没有副作用:

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

    虽然我没有在每个浏览器上testing它。

    接受的答案不适合我,因为想要能够处理任何任意的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" 

    检查这个:

     alert(window.location.hostname); 

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

    和:

     window.location.host 

    将返回像www.example.com:80这样的端口的域名

    有关完整的参考资料,请查阅Mozilla开发者网站

    我想指定一些东西。 如果有人想要像我需要的path得到整个url,可以使用:

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

    正如马丁所说,其他答案不适用于任意的url。 新的URL对象将工作,但仍然是实验性的,不兼容所有的浏览器。

    为了更可靠和跨浏览器的解决scheme,您可以使用我构build的这个组件来parsing一个任意的URL到类似于上面的URL对象中find的属性。

    例如:

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

    newUrl现在将包含:

     aaa.bbb.ccc.com 

    您可以导入组件以使用parseUrl()