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

Posted 2023-04-14

【中文标题】如何在 JavaScript 中提取 URL 的主机名部分

【英文标题】：How to extract the hostname portion of a URL in JavaScript

【发布时间】：2010-11-24 23:49:14

【问题描述】：

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

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

只提取主机部分：

aaa.bbb.ccc.com

必须有一个 javascript 函数可以可靠地执行此操作，但我找不到它。

【参考方案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

***** 正如ref 所述，window.location.origin 的浏览器兼容性尚不清楚。我在 chrome 中检查了它，如果端口不是 80，它返回 http://sub.domain.com:port，如果端口是 80，它返回 http://sub.domain.com。

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

【讨论】：

我在 IIS 中有一个网站和 2 个应用程序。例如：sub.domain.com/v1 和 sub.domain.com/v2 以及像 sub.domain.com/v1/Default 这样的页面。 aspx 或 sub.domain.com/v2/Products/Default.aspx 等。我如何获得价值 /v2 ，我的应用程序 sub.domain.com/v2 的根？

@Kiquenet 使用像 WebStorm 这样的 JavaScript IDE，您可以在编写代码时看到可能的选项。

window.location.origin 在 IE9 中未定义（根据链接，它是 IE11+）。 This answer 帮助。

显然对几乎所有人都有帮助，只是它没有回答如何从 URL 中提取主机部分的问题。有趣的是，getRootUrl 函数的正确答案只有 17 票对 609 票。

window.location.pathname 将不会提供/virtualPath。它会给/virtualPath/page.htm

【参考方案2】：

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

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

对于一个网址，比如说'http://***.com/questions'，它将返回'http://***.com'

【讨论】：

看来您应该使用“主机名”而不是“主机”来实现上述结果。来源：***.com/questions/6725890/…

您可以使用 location.origin 获得相同的结果。

原来的问题没有询问 URL 的协议部分。

【参考方案3】：

接受的答案对我不起作用，因为我希望能够使用任意 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"

【讨论】：

谢谢。几个小时以来，我一直在寻找方法来提取我从 api 获得的 url。就这么简单。我只在带有新 URL 的 url 中阅读了它。谢谢。

[phone]

这里的两个答案之一，不假设您在浏览器方面......

它在 Microsoft Internet Explorer 11 中不起作用。无论如何，谢谢。

【参考方案4】：

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

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

【参考方案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");

【讨论】：

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

这里的两个答案之一并不假设您在浏览器方面......但是请使用新 URL 查看 Martin Konecny 的最新答案。

【参考方案6】：

试试

document.location.host

或

document.location.hostname

【参考方案7】：

使用

window.location.origin

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

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

【讨论】：

这很好，但请注意它显然不适用于 IE11 + WIN7 developer.microsoft.com/en-us/microsoft-edge/platform/issues/…

【参考方案8】：

我使用了另一个 hack，但从未在任何 *** 响应中看到： 使用图像的“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 这样的网址上， root 将设置为 http://domain.com/somesite/。 这也适用于 localhost 或任何有效的基本 URL。

请注意，这将导致对 $ 虚拟图像的 HTTP 请求失败。 您可以改用现有图像来避免这种情况，只需对代码稍作更改。

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

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

不过，我并没有在每个浏览器上都对其进行测试。

【参考方案9】：

检查一下：

alert(window.location.hostname);

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

和：

window.location.host

将返回带有www.example.com:80之类端口的域名

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

【参考方案10】：

假设你有这个 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

【参考方案11】：

我想指定一些东西。如果有人想用我需要的路径获取整个 url，可以使用：

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

【讨论】：

为什么要走更长的路。可以通过 var fullUrl = window.location.origin+ window.location.pathname

获得

但有时您想在协议和主机名之间添加子域之类的内容，例如多语言等

【参考方案12】：

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

【参考方案13】：

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

【参考方案14】：

我的解决方案适用于包括 Microsoft 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;
    

【参考方案15】：

您可以使用 / 拆分 URL 字符串

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

结果。 exampleurl.com