从URL获取协议,域和端口

Question

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

https://localhost:8181/ContactUs-1.0/contact?lang=it&report_type=consumer
>>>
https://localhost:8181

Answer 1

var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');

Answer 2

这些答案似乎都没有完全解决这个问题,这个问题需要一个任意的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:'

奖励:搜索参数

有可能到头来你可能想掰开搜索网址参数为好,因为"？的startIndex = 1的pageSize = 10"是不是对自己太可用.

如果您使用上面的方法1(URL API),则只需使用searchParams getters:

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

或者获取所有参数:

Array
    .from(url.searchParams)
    .reduce((accum, [key, val]) => {
        accum[key] = val;
        return accum;
    }, {});
// -> { 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' }

Answer 3

首先获取当前地址

var url = window.location.href

然后只解析该字符串

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

你的网址是:

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

希望这可以帮助

Answer 4

出于某种原因,所有答案都是过度杀伤力.这就是全部:

window.location.origin

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

Answer 5

正如已经提到的那样,还没有完全支持,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修复的内容

Answer 6

主办

var url = window.location.host;

回报 localhost:2679

主机名

var url = window.location.hostname;

回报 localhost

Answer 7

为什么不使用：

let full = window.location.origin

Answer 8

window.location.origin 将足以得到相同.

Answer 9

protocol属性设置或返回当前URL的协议,包括冒号(:).

这意味着如果您只想获得HTTP/HTTPS部分,可以执行以下操作:

var protocol = window.location.protocol.replace(/:/g,'')

对于您可以使用的域:

var domain = window.location.hostname;

对于您可以使用的端口:

var port = window.location.port;

请记住,如果端口在URL中不可见,则该端口将为空字符串.例如:

• http://example.com/将返回""作为端口
• http://example.com:80/将返回80端口

如果您在没有端口使用时需要显示80/443

var port = window.location.port || (protocol === 'https' ? '443' : '80');

Answer 10

这是我正在使用的解决方案：

const result = `${ window.location.protocol }//${ window.location.host }`;

编辑：

要添加跨浏览器兼容性，请使用以下命令：

const result = `${ window.location.protocol }//${ window.location.hostname + (window.location.port ? ':' + window.location.port: '') }`;

Answer 11

实际上,window.location.origin在遵循标准的浏览器中运行良好,但猜猜是什么.IE不符合标准.

因此,这在IE,FireFox和Chrome中对我有用:

var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');

但是对于可能导致冲突的未来可能的增强,我在"location"对象之前指定了"window"引用.

var full = window.location.protocol+'//'+window.location.hostname+(window.location.port ? ':'+window.location.port: '');