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

小开

试一试

document.location.host

或

document.location.hostname

小开

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

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

对于一个url，比如'http://stackoverflow.com/questions'，它将返回'http://stackoverflow.com'

小开

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

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

但我更喜欢这个更简单的方法(适用于任何URI字符串):

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

小开

检查:

alert(window.location.hostname);

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

和:

window.location.host

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

对于完整的参考检查Mozilla开发人员网站。

小开

使用

window.location.origin

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

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

小开

最佳答案

假设你有一个地址为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的浏览器兼容性尚不清楚。我在chrome中检查了它，如果端口不是80，它返回http://sub.domain.com:port，如果端口是80，则返回http://sub.domain.com。

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

小开

有另一个hack我使用，从来没有看到任何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/。这也适用于localhost或任何有效的基URL 注意，这将导致对$虚拟映像的HTTP请求失败。你可以使用一个现有的图像来避免这种情况，只需要稍微修改代码

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

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

不过，我并没有在每个浏览器上测试它。

小开

我想具体说明一些事情。如果有人想要得到完整的url路径像我需要的，可以使用:

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

小开

接受的答案并没有为我工作，因为我希望能够与任何任意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"

小开

我知道这有点晚了，但我用一些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，但在我的工作中，这并不重要。

小开

Regex提供了更大的灵活性。

    //document.location.href = "http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah
//1.
var r = new RegExp(/http:\/\/[^/]+/);
var match = r.exec(document.location.href) //gives http://aaa.bbb.ccc.com


//2.
var r = new RegExp(/http:\/\/[^/]+\/[^/]+/);
var match = r.exec(document.location.href) //gives http://aaa.bbb.ccc.com/asdf

小开

我的解决方案适用于所有浏览器，包括微软Internet Explorer，不使用任何正则表达式，它的灵感来自Noah Cardoza和Martin Konecny的解决方案:

function getHostname(href) {
if (typeof URL === 'object') {
// workaround for MS IE 11 (Noah Cardoza's solution but without using Object.assign())
var dummyNode = document.createElement('a');
dummyNode.href = href;
return dummyNode.hostname;
} else {
// Martin Konecny's solution
return new URL(href).hostname;
}
}

小开

让我们假设你有这样的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

小开

你可以使用/分割URL字符串

const exampleURL = "Https://exampleurl.com/page1/etc/etc"
const URLsplit = exampleURL.split("/")
console.log(URLsplit)
console.log(URLsplit[2])

结果。exampleurl.com