在 JavaScript 中如何验证 URL?

104 阅读1分钟

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 包
  • 正则表达式
  • ......