在 JavaScript 中如何从 URL 解析 hostname
在 JavaScript 中如何从 URL 解析 hostname，在前端开发领域，这是一个比较常见的诉求；当然，其解决方法很多，且也非常简单；只不过，在不同环境下，就须采取不同的方案；本文就与大家探讨下，在 JavaScript 中，从 URL 解析出 hostname 的各种手法。
之前在开发倾城之链，就常遇见此类需求：需要根据所收录网址（url），根据其 hostname 获取到对应的应用截图；故而，下面就以 https://nicelinks.site/ 来做举例。
另外，需要说明的是，JavaScript 可以运行在多种场景，如浏览器、Node.js、小程序、快应用等；后面几种环境，没有 Window 对象，接口如 URL 也就不存在，如此一来，有些方法便不能使用。下面将从浏览器环境和非浏览器环境，来探讨。
浏览器环境
下面谈到的方法，只能在浏览器环境使用。
借助 URL 对象
const urlObject = new URL("https://nicelinks.site/")
console.log(`hostname：`, urlObject.hostname)
备注：此特性在 Web Worker 中可用，在 Node.js 环境，无法使用。
通过创建 a 标签
const getLocation = function(href) {
const location = document.createElement("a")
location.href = href;
return location;
};
const location = getLocation("https://nicelinks.site/")
console.debug(`hostname：`, location.hostname)
const parser = document.createElement('a')
parser.href = 'https://nicelinks.site/'
console.debug(`hostname：`, location.hostname)
非浏览器环境
下面谈到的方法，因为是基于正则，在浏览器环境，或非浏览器环境，都能使用。
基于正则表达式
const urlPath = 'https://nicelinks.site/'
const matches = urlPath.match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]|$)/i)
const hostname = matches && matches[1]
console.debug(`hostname：`, hostname)
如果您想获得更多属性，如 href、protocol、host、port、hash 等，可以将封装一个函数，类似如下代码：
function getLocation(href) {
var match = href.match(/^(https?\:)\/\/(([^:\/?#]*)(?:\:([0-9]+))?)([\/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/);
return match && {
href: href,
protocol: match[1],
host: match[2],
hostname: match[3],
port: match[4],
pathname: match[5],
search: match[6],
hash: match[7]
}
}
const locationObj = getLocation('https://nicelinks.site/')
console.debug(`hostname：`, locationObj.hostname)
倘若，您还有更简单（优雅）的方法，欢请留言分享^-^。