JS正则如何精准抓域名？新手避坑指南

（拍大腿）哎，各位程序员兄弟，你们有没有被这样的需求逼疯过？产品经理非要你在用户输入框里加个域名验证，结果用户输个"http://www.baidu。com"（注意是中文句号）居然也能通过！今天就带你用正则表达式**出火眼金睛！

一、基础认知：域名验证到底在验什么

上周实习生写了个/^[a-zA-Z0-9]+$/的正则，结果把"baidu.com"判为非法！这哥们儿居然忘了域名里有点号这回事！（扶额）咱得先搞明白域名结构：

​​标准域名四要素：​​

• 主体部分（baidu）
• 顶级域名（com）
• 子域名（www）
• 协议头（http:// 这个经常被漏掉）

（敲黑板）看这个错误案例：

javascript**
// 错误写法：漏掉点号和长度限制const badReg = /^[w-]+$/;// 正确基础版：const baseReg = /^[w-]+.[a-zA-Z]{2,}$/;

二、五大常见翻车现场

1. ​​点号灾难​​
   某电商平台用/^[a-zA-Z0-9]+.[a-zA-Z]+$/，结果用户输入"127.0.0.1"被判定为合法域名！应该在点号前加转义符：\.

2. ​​子域名陷阱​​
   论坛系统漏掉子域名检测，导致"http://.admin.baidu.com"这样的危险域名通过验证。修正方案：

   javascript**
   /^(http://)?([w-]+\.)+[a-zA-Z]{2,}$/

3. ​​中文域名懵逼​​
   政府网站对接时发现"政务.cn"总是验证失败，需要支持Punycode编码：

   javascript**
   /^xn--[w-]+.[a-zA-Z]{2,}$/

（突然想到——如果用户把域名写成"https://www._baidu.com"怎么办？下划线可是合法字符！）

三、工业级解决方案

去年给银行做项目时，他们的域名验证需求变态到要检测63字符限制！最终成品长这样：

javascript**
const domainReg = /^(?:https?://)?(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/;

​​分步拆解：​​

1. (?:https?://)? → 匹配可选http/https协议
2. [a-zA-Z0-9] → 首字符必须为数字或字母
3. (?:[a-zA-Z0-9-]{0,61} → 中间部分最多61字符
4. [a-zA-Z]{2,} → 顶级域名至少2字母

（掏出测试用例表格）：