JS URL 校验方法及正则表达式优化

测试给了下面这些 url，要进行校验，你看看你的校验规则能通过吗？

www.baidu.com./hello
www.baidu.com123
http://www.baidu.com.cn.
www.baidu.com123./hello

流行的正则判断

开始我随便在网上找了个正则表达式进行判断

// 网址
const Url = /(https|http)?:\/\/([^\/\:]+)?(\:[0-9]+)?(\/[^\?]+)?(\?.+)?/;
Url.test('http://www.baidu.com./hello'); // true

emmmmm，这个正则可能？不太好使

使用浏览器自带的 URL 方法判断

const isUrl = (path) => {
  if (!path.startsWith('http')) {
    return false;
  }
  try {
    const url = new URL(path);
    return !!url;
  } catch (error) {
    return false;
  }
};

isUrl('http://www.baidu.com./hello'); // true

我当时就是？？？？

老老实实去正则

function validURL(str) {
  const pattern = new RegExp(
    '^(https?:\\/\\/)' + // 协议
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // 域名
      '((\\d{1,3}\\.){3}\\d{1,3}))' + // IP
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // 端口
      '(\\?[;&a-z\\d%_.~+=-]*)?' + // 请求参数
      '(\\#[-a-z\\d_]*)?$',
    'i'
  );
  return !!pattern.test(str);
}
validURL('http://www.baidu.com./hello'); // false

pomo 巨佬提到过这个规则没有校验 IPV6，我有时间就加上

后记

是不是我们的测试太严格了？一个负责的好测试，可以发现你代码中很多遗漏项和不足之处

让我想起来了一个网传，大概意思如下：

• 低级开发 测试：你看这有个 bug 开发：什么，怎么可能有 BUG？你给我复现一下。

• 中级开发 测试：你看这有个 bug 开发：嗯这个我知道我改过了，你重新构建一下就行。

• 高级开发 测试：你看这，这 bug 在哪找？ 开发：你想要啥 bug 我给你加上。