Firefox 与 Chrome 使用 `new URL()` 进行 JavaScript URL 验证

Question

我正在尝试验证 JavaScript 中的 URL，并根据 MDN JavaScript 的

URL

API 与 Chromium 浏览器和 Firefox 兼容。然而，两个浏览器之间的行为有所不同。具体来说，Chromium 浏览器似乎更加宽松，并且会自动应用编码，而 Firefox 则不会。

在使用

encodeURI('https://abc.co m')

进行验证之前，我尝试先对 URL 进行编码，但 Firefox 也不接受

https://abc.c%20m

作为有效 URL，所以我很困惑如何才能有一个好的方法来支持这两种浏览器无需求助于正则表达式。

非常欢迎任何有关跨浏览器支持的一致方法的想法。谢谢！

Answer 1

使用功能

isValidUrl

function isValidURL(url) {
  try {
    // Attempt to parse the URL using the URL constructor
    const parsedURL = new URL(url);
    
    // Check if the domain contains any spaces
    if (parsedURL.hostname.includes(' ')) {
      return false;
    }

    // If parsing was successful and there are no spaces in the domain, return true
    return true;
  } catch (e) {
    // If URL parsing fails, return false
    return false;
  }
}

域空间检查：由于浏览器可能以不同的方式处理空格，因此手动检查域部分中的空格有助于确保跨浏览器的一致性。

跨浏览器兼容性：这种方法应该在 Chromium 和 Firefox 上一致地工作，因为它利用本机浏览器功能，同时考虑到差异。

如果仍然遇到不一致的情况，请考虑使用像whatwg-url这样的URL解析库，它严格遵守URL规范，并在不同环境下提供一致的结果。