URL.canParse()

MDN: developer.mozilla.org/en-US/docs/…

URL 接口的 URL.canParse() 静态方法返回一个布尔值，表示绝对 URL 或与基本 URL 结合的相对 URL 是否可解析和有效。

URL.canParse('https://www.baidu.com'); // true 
URL.canParse('www.baidu.com'); // false
URL.canParse('/index.html'); // false
URL.canParse('/index.html', 'https://www.baidu.com'); // true

不过目前该方法的浏览器兼容性不佳，如下图所示：

不过我们可以使用 URL() 构造函数，因为 URL.canParse() 依靠与 URL() 相同的算法来评估有效的 URL。

URL()

MDN: developer.mozilla.org/en-US/docs/…

URL() 目前得到了很好的支持，因此一般建议使用构造函数来验证 URL。

如下是在 try...catch 代码块中构造 URL 。调用 URL() 构造函数成功，它返回 true，而如果导致构造函数抛出的错误，它返回 false。这是因为如果给定的基本 URL 或生成的 URL 不是有效的 URL，则会出现 JavaScript TypeError 异常。

function canParse(url: string | URL, base?: string | URL | undefined): boolean {
  try {
    return !!new URL(url, base);
  } catch {
    return false;
  }
}

当然，我们也可以使用开源库 core-js。core-js 已支持了 URL.canParse()。

源代码：github.com/zloirock/co…

其他方案

• 开源的 npm 包
• 正则表达式
• ......