从 URL 获取协议、域和端口

IT技术 javascript url dns protocols port
2021-01-13 09:33:43

我需要从给定的 URL 中提取完整的协议、域和端口。例如:

https://localhost:8181/ContactUs-1.0/contact?lang=it&report_type=consumer
>>>
https://localhost:8181
6个回答
const full = location.protocol + '//' + location.host;
如果您有 URL 字符串,这根本不起作用,对吗?(即你需要 location此工作)
2021-03-13 09:33:43
@Randomblue 怎么样?你会得到about://但是,我很想知道,它的用例是about:blank什么?我不确定是否有任何浏览器在 中注入了插件资源about:blank,但似乎这可能是唯一的用例。
2021-03-18 09:33:43
应选择此答案作为正确答案。它很干净并使用标准的位置对象。
2021-03-30 09:33:43
抱歉回复晚了,@NickT。是的,它不会那样做。请使用大卫为此提供不错的解决方案
2021-04-01 09:33:43
你不能用location.host代替location.hostname+location.port吗?
2021-04-07 09:33:43

这些答案似乎都没有完全解决这个问题,它需要一个任意的 url,而不是当前页面的 url。

方法 1:使用 URL API(警告:不支持 IE11)

您可以使用URL API(IE11 不支持,但在其他任何地方都可用)。

这也使得访问搜索参数变得容易另一个好处:它可以在 Web Worker 中使用,因为它不依赖于 DOM。

const url = new URL('http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');

方法 2(旧方法):在 DOM 中使用浏览器内置的解析器

如果您也需要它在旧浏览器上工作,请使用它。

//  Create an anchor element (note: no need to append this element to the document)
const url = document.createElement('a');
//  Set href to any path
url.setAttribute('href', 'http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');

而已!

浏览器的内置解析器已经完成了它的工作。现在您可以只获取您需要的部分(请注意,这适用于上述两种方法):

//  Get any piece of the url you're interested in
url.hostname;  //  'example.com'
url.port;      //  12345
url.search;    //  '?startIndex=1&pageSize=10'
url.pathname;  //  '/blog/foo/bar'
url.protocol;  //  'http:'

奖励:搜索参数

您可能还想拆分搜索 url 参数,因为 '?startIndex=1&pageSize=10' 本身不太可用。

如果您使用了上面的方法 1(URL API),您只需使用 searchParams 获取器:

url.searchParams.get('startIndex');  // '1'

或者获取所有参数:

function searchParamsToObj(searchParams) {
  const paramsMap = Array
    .from(url.searchParams)
    .reduce((params, [key, val]) => params.set(key, val), new Map());
  return Object.fromEntries(paramsMap);
}
searchParamsToObj(url.searchParams);
// -> { startIndex: '1', pageSize: '10' }

如果您使用了方法 2(旧方法),您可以使用以下方法:

// Simple object output (note: does NOT preserve duplicate keys).
var params = url.search.substr(1); // remove '?' prefix
params
    .split('&')
    .reduce((accum, keyval) => {
        const [key, val] = keyval.split('=');
        accum[key] = val;
        return accum;
    }, {});
// -> { startIndex: '1', pageSize: '10' }
谢谢你的这个聪明的把戏!我想补充一点:host都有hostname前者包括端口(例如localhost:3000),而后者只是主机名(例如localhost)。
2021-03-23 09:33:43
这是一个很棒的答案,应该获得更多选票,因为这个答案不仅限于当前位置,而且适用于任何 url,并且因为这个答案利用浏览器的内置解析器而不是自己构建一个(我们不能希望做得一样好或一样快!)。
2021-03-27 09:33:43
如果我使用“google.com”检查 anker,link.protocol 会给我一个“http:”:-( var link = document.createElement('a'); link.setAttribute('href', 'google.com'); console.log(link.protocol)
2021-04-01 09:33:43
http可能页面上这样做吗?如果未指定,它将从当前位置“继承”
2021-04-02 09:33:43
这在绝对 URL 的情况下效果很好。在相对 URL 和跨浏览器的情况下失败。有什么建议?
2021-04-11 09:33:43

首先获取当前地址

var url = window.location.href

然后只需解析该字符串

var arr = url.split("/");

你的网址是:

var result = arr[0] + "//" + arr[2]

希望这可以帮助

David Calhoun 的回答使用内置解析器(如location),但可用于任何url。检查它是否整洁。
2021-03-13 09:33:43
这适用于location对象不可用的 URL 字符串(浏览器外部的 js!)
2021-03-14 09:33:43
或者只是把它变成一个单线: window.location.href.split('/').slice(0, 3).join('/')
2021-03-18 09:33:43
以及如何在节点上执行此操作?
2021-04-04 09:33:43
窗口.位置.原点
2021-04-04 09:33:43

出于某种原因,所有的答案都是矫枉过正。这就是全部:

window.location.origin

更多细节可以在这里找到:https : //developer.mozilla.org/en-US/docs/Web/API/window.location#Properties

2020 年你好:它现在适用于所有浏览器,Opera 未知。这个信息是从这里得到的:developer.mozilla.org/en-US/docs/Web/API/Window/...
2021-03-21 09:33:43
仅供参考,我敢肯定,这将在未来是巨大的,当所有流行的浏览器已经实现了它,但是,这是不是在目前的情况下:developer.mozilla.org/en-US/docs/Web/API/...在根据我的研究,撰写本文时只有最新版本的 Firefox 和 WebKit 浏览器支持 origin 属性。
2021-04-03 09:33:43
只是为了完成:位置是在 HTML5定义的,它实现了在 WHATWGURLUtils定义接口并包含origin属性。
2021-04-03 09:33:43
你好,从 2015 年开始……不幸的是,根据MDN 上的这个兼容性表URLUtils 仍然没有在所有浏览器中正确实现然而,似乎 origin 属性的支持比 2013 年略好,但它仍然不适合生产,因为它没有在 Safari 中正确实现。对不起大家 :(
2021-04-03 09:33:43
它也不适用于 IE,它返回“未定义”。
2021-04-07 09:33:43

正如已经提到的,目前还没有完全支持,window.location.origin但不是使用它或创建一个新变量来使用,我更喜欢检查它,如果它没有设置为设置它。

例如;

if (!window.location.origin) {
  window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}

我实际上在几个月前写过这个问题 修复 window.location.origin

这是我第一次知道window.location.origin它的存在。谢谢你。^^
2021-04-03 09:33:43