JavaScript中如何验证含协议和顶级域名的有效URL？

要满足必须包含http/https协议且域名带顶级域的校验要求，你可以对原正则做以下修改：

const pattern = new RegExp(
  '^https?:\/\/' + // 强制要求http/https协议
    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,})' + // 仅匹配带顶级域的域名，排除IP
    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // 端口与路径
    '(\\?[;&a-z\\d%_.~+=-]*)?' + // 查询字符串
    '(\\#[-a-z\\d_]*)?$',
  'i'
);

修改关键点 #

1. 强制协议存在：移除原正则协议部分的?，确保URL必须以http://或https://开头，杜绝无协议的情况通过校验。
2. 移除IP匹配分支：删掉原正则中IP地址的匹配规则（|((\d{1,3}\.){3}\d{1,3})），因为IP地址没有顶级域，不符合你的校验需求。
3. 强化域名规则：保留原有的域名匹配逻辑(([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}，确保域名至少包含一个子域名段和一个2位以上的顶级域（如.com、.org、.co.uk这类多段顶级域也能正常匹配），避免http://something这种无顶级域的字符串通过校验。

测试示例 #

• ✅ 有效URL：https://example.com、http://blog.example.net/path?page=2#section、https://test.co.uk
• ❌ 无效URL：http://something（无顶级域）、example.org（无协议）、http://192.168.0.1（IP地址）、ftp://test.com（非http/https协议）

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