如何修改JavaScript URL正则以匹配www.或http(s)://开头的链接

首先，咱们先拆解原正则的问题：它强制要求URL必须以http://或https://开头，自然就匹配不了仅以www.开头的地址。要实现你要的所有匹配场景，只需要调整开头的匹配逻辑，让它同时支持「带协议的URL」和「直接以www.开头的URL」即可。

修改后的正则表达式 #

/(https?:\/\/|www\.)[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/gi

关键修改点解释 #

• 开头的(https?:\/\/|www\.)：这是核心改动，用分支匹配实现「要么是http/https协议前缀，要么是直接以www.开头」的二选一逻辑，完美覆盖你要的所有URL开头场景。
• 域名后缀长度调整：把原正则的[a-z]{2,4}改成[a-z]{2,6}，现在很多新顶级域名（比如.app、.dev、.xyz）长度超过4，这样适配性更强。
• 修正转义问题：原正则里的https?:\/少了一个转义的/，正确的http://转义后应该是https?:\/\/，不然会匹配不完整。

JavaScript使用示例 #

这里还要提个细节：仅以www.开头的URL在浏览器里直接跳转可能会有问题（缺少协议），所以最好在生成<a>标签时补全http://，示例代码如下：

const originalText = "测试URL集合：http://example.com，https://www.test.org，www.stackoverflow.com，http://www.blog.cn";
const urlRegex = /(https?:\/\/|www\.)[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/gi;

const convertedText = originalText.replace(urlRegex, (match) => {
  // 给www.开头的URL补全http协议
  const fullUrl = match.startsWith('www.') ? `http://${match}` : match;
  return `<a href="${fullUrl}">${match}</a>`;
});

console.log(convertedText);

运行后输出结果：

测试URL集合：<a href="http://example.com">http://example.com</a>，<a href="https://www.test.org">https://www.test.org</a>，<a href="http://www.stackoverflow.com">www.stackoverflow.com</a>，<a href="http://www.blog.cn">http://www.blog.cn</a>

补充说明 #

这个正则已经能覆盖你列出的所有URL开头场景，如果需要适配更边缘的情况（比如带端口号、IPv6地址等），可以再针对性调整，但对于大多数日常业务中的普通URL来说，这个版本已经足够好用了。

内容的提问来源于stack exchange，提问作者PHPMYSQLDEV