正则表达式是处理字符串的强大工具,在Web前端开发中经常会用到。本文整理了一些常用的正则表达式,包含源代码和详细注释,希望能给大家带来帮助。

1. 验证邮箱地址

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 [a-zA-Z0-9._%+-]+ 匹配一个或多个字母、数字、点、下划线、百分号、加号或减号
// @ 匹配@符号
[a-zA-Z0-9.-]+ 匹配一个或多个字母、数字、点或减号
// \. 匹配点号
[a-zA-Z]{2,} 匹配两个或更多字母
 

2. 验证手机号码(中国大陆)

const phoneRegex = /^1[3-9]\d{9}$/;
// 1 匹配数字1
// [3-9] 匹配3到9之间的任意数字
// \d{9} 匹配9个数字
 

3. 验证身份证号(中国大陆)

const idCardRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
// (^\d{15}$) 匹配15位数字
// | 或者
// (^\d{18}$) 匹配18位数字
// | 或者
// (^\d{17}(\d|X|x)$) 匹配17位数字后跟一个数字或X或x

4. 验证URL

const urlRegex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
// (https?:\/\/)? 可选的http://或https://
// ([\da-z\.-]+) 匹配域名
// \. 匹配点号
// ([a-z\.]{2,6}) 匹配顶级域名
// ([\/\w \.-]*)*  匹配路径和参数
// \/? 可选的结尾斜杠
 

5. 验证日期格式(YYYY-MM-DD)

const dateRegex = /^\d{4}-(?:0[1-9]|1[0-2])-(?:0[1-9]|[12]\d|3[01])$/;
// \d{4} 匹配四位数字(年份)
// - 匹配连字符
// (?:0[1-9]|1[0-2]) 匹配01到12(月份)
// - 匹配连字符
// (?:0[1-9]|[12]\d|3[01]) 匹配01到31(日期)
 

6. 验证密码强度

const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
// (?=.*[a-z]) 至少包含一个小写字母
// (?=.*[A-Z]) 至少包含一个大写字母
// (?=.*\d) 至少包含一个数字
// (?=.*[@$!%*?&]) 至少包含一个特殊字符
// [A-Za-z\d@$!%*?&]{8,} 匹配8个或更多允许的字符
 

7. 验证IPv4地址

const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
// (?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?) 匹配0-255
// \. 匹配点号
// {3} 重复前面的模式3次
 

8. 验证十六进制颜色值

const hexColorRegex = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/; 

// #? 可选的#号
// ([a-fA-F0-9]{6}|[a-fA-F0-9]{3}) 匹配6位或3位十六进制数

9. 验证中文字符

const chineseRegex = /^[\u4e00-\u9fa5]+$/;
// [\u4e00-\u9fa5]+ 匹配一个或多个中文字符

10. 验证QQ号

const qqRegex = /^[1-9][0-9]{4,10}$/;
// [1-9] 首位不能为0
// [0-9]{4,10} 匹配4到10位数字

以上就是Web前端开发中常用的10个正则表达式。在实际使用时,可能需要根据具体需求进行调整。正则表达式虽然强大,但也要注意性能问题,对于一些简单的验证,使用普通的字符串方法可能更加高效。

希望这篇文章对您有所帮助!如果您有任何问题或补充,欢迎在评论区留言。