前端最常用的25个正则表达式，代码效率提高80%
前言
本文介绍了25个常用的正则表达式，包括手机号码、身份证、邮箱、URL、IPv4、颜色、日期、整数、小数、密码强度等的校验方法。每个正则表达式都附有示例代码，展示了如何使用这些表达式进行数据验证，旨在提高代码效率和准确性。
常用正则表达式
1. 手机号码的校验
const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
const phoneStr1 = '18886233487';
console.log(phoneReg.test(phoneStr1)); // true
const phoneStr2 = '17283017203897';
console.log(phoneReg.test(phoneStr2)); // false
2. 身份证的校验
const sfzReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
const sfzStr1 = '415106199801012130';
console.log(sfzReg.test(sfzStr1)); // true
const sfzStr2 = '718381298381212183';
console.log(sfzReg.test(sfzStr2)); // false
3. 邮箱的校验
const emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
const emailStrWY = '956666@163.com';
const emailStrQQ = '956666@qq.com';
console.log(emailReg.test(emailStrWY)); // true
console.log(emailReg.test(emailStrQQ)); // true
const noEmail = '72873213.com';
console.log(emailReg.test(noEmail)); // false
4. URL的校验
const urlReg = /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
const urlStr1 = 'https://haha.sunshine.com/xxx/xxx';
console.log(urlReg.test(urlStr1)); // true
const urlStr2 = 'sss://haha.sunshine.com/xxx/xxx';
console.log(urlReg.test(urlStr2)); // false
5. IPv4的校验
const ipv4Reg = /^(?:(?: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]?)$/;
const ipv4Str1 = '122.12.56.65';
console.log(ipv4Reg.test(ipv4Str1)); // true
const ipv4Str2 = '122.12.56.655';
console.log(ipv4Reg.test(ipv4Str2)); // false
6. 16进制颜色的校验
const color16Reg = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
const color16Str1 = '#fff';
console.log(color16Reg.test(color16Str1)); // true
const color16Str2 = '#1234567';
console.log(color16Reg.test(color16Str2)); // false
7. 日期 YYYY-MM-DD
const dateReg = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/;
const dateStr1 = '2021-10-10';
console.log(dateReg.test(dateStr1)); // true
const dateStr2 = '2021-01-01 1';
console.log(dateReg.test(dateStr2)); // false
8. 日期 YYYY-MM-DD hh:mm:ss
const dateReg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
const dateStr1 = '2021-10-10 16:16:16';
console.log(dateReg.test(dateStr1)); // true
const dateStr2 = '2021-10-10 16:';
console.log(dateReg.test(dateStr2)); // false
9. 整数的校验
const intReg = /^[-+]?\d*$/;
const intNum1 = 12345;
console.log(intReg.test(intNum1)); // true
const intNum2 = 12345.1;
console.log(intReg.test(intNum2)); // false
10. 小数的校验
const floatReg = /^[-\+]?\d+(\.\d+)?$/;
const floatNum = 1234.5;
console.log(floatReg.test(floatNum)); // true
11. 保留n位小数
function checkFloat(n) {
return new RegExp(`^([1-9]+[\\d]*(\\.[0-9]{1,${n}})?)$`);
}
// 保留2位小数
const floatReg = checkFloat(2);
const floatNum1 = 1234.5;
console.log(floatReg.test(floatNum1)); // true
const floatNum2 = 1234.55;
console.log(floatReg.test(floatNum2)); // true
const floatNum3 = 1234.555;
console.log(floatReg.test(floatNum3)); // false
12. 邮政编号的校验
const postalNoReg = /^\d{6}$/;
const postalNoStr1 = '522000';
console.log(postalNoReg.test(postalNoStr1)); // true
const postalNoStr2 = '5220000';
console.log(postalNoReg.test(postalNoStr2)); // false
13. QQ号的校验
const qqReg = /^[1-9][0-9]{4,10}$/;
const qqStr1 = '1915801633';
console.log(qqReg.test(qqStr1)); // true
const qqStr2 = '191580163333';
console.log(qqReg.test(qqStr2)); // false
14. 微信号的校验
const wxReg = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;
const wxStr1 = 'linsanxin885577';
console.log(wxReg.test(wxStr1)); // true
const wxStr2 = '厉害了我的vx';
console.log(wxReg.test(wxStr2)); // false
15. 车牌号的校验
const carNoReg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
const carNoStr1 = '粤A12345';
console.log(carNoReg.test(carNoStr1)); // true
const carNoStr2 = '广东A12345';
console.log(carNoReg.test(carNoStr2)); // false
16. 只含字母的字符串
const letterReg = /^[a-zA-Z]+$/;
const letterStr1 = 'sunshineLin';
console.log(letterReg.test(letterStr1)); // true
const letterStr2 = 'sunshine_Lin';
console.log(letterReg.test(letterStr2)); // false
17. 包含中文的字符串
const cnReg = /[\u4E00-\u9FA5]/;
const cnStr1 = '我是sunshine_Lin，林三心';
console.log(cnReg.test(cnStr1)); // true
const cnStr2 = 'sunshine_Lin';
console.log(cnReg.test(cnStr2)); // false
18. 密码强度的校验
const passwordReg = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}/;
const password1 = 'sunshine_Lin12345..';
console.log(passwordReg.test(password1)); // true
const password2 = 'sunshineLin12345';
console.log(passwordReg.test(password2)); // false
19. 字符串长度n的校验
function checkStrLength(n) {
return new RegExp(`^.{${n}}$`);
}
// 校验长度为3的字符串
const lengthReg = checkStr
Length(3);
const str1 = 'hhh';
console.log(lengthReg.test(str1)); // true
const str2 = 'hhhhh';
console.log(lengthReg.test(str2)); // false
20. 文件拓展名的校验
function checkFileName(arr) {
arr = arr.map(name => `.${name}`).join('|');
return new RegExp(`(${arr})$`);
}
const filenameReg = checkFileName(['jpg', 'png', 'txt']);
const filename1 = 'sunshine.jpg';
console.log(filenameReg.test(filename1)); // true
const filename2 = 'sunshine.png';
console.log(filenameReg.test(filename2)); // true
const filename3 = 'sunshine.txt';
console.log(filenameReg.test(filename3)); // true
const filename4 = 'sunshine.md';
console.log(filenameReg.test(filename4)); // false
21. 匹配img和src
const imgReg = /<img.*?src=[\"|\']?(.*?)[\"|\']?\s.*?>/ig;
const htmlStr = '<div></div><img src="sunshine.png"/><img src="sunshine111.png"/>';
console.log(imgReg.exec(htmlStr));
console.log(imgReg.exec(htmlStr));
22. 匹配html中的注释
const noteReg = /<!--(.*?)-->/g;
const htmlStr = '<!--一个div标签--> <div></div> <!--一个div标签--> <div></div>';
console.log(noteReg.exec(htmlStr));
console.log(noteReg.exec(htmlStr));
23. 匹配html中的style
const styleReg = /style="[^=>]*"([(\s+\w+=)|>])/g;
const htmlStr = '<div style="background:#000;"><span style="color:#fff"></span></div>';
console.log(styleReg.exec(htmlStr));
console.log(styleReg.exec(htmlStr));
24. 匹配html中的颜色
const colorReg = /#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/g;
const htmlStr = '<div style="background:#000;"><span style="color:#fff"></span></div>';
console.log(colorReg.exec(htmlStr));
console.log(colorReg.exec(htmlStr));
25. 匹配html标签
const endReg = /<("[^"]*"|'[^']*'|[^'">])*>/g;
const htmlStr = '<div style="background:#000;"><span style="color:#fff"></span></div><h1></h1>';
console.log(endReg.exec(htmlStr));
console.log(endReg.exec(htmlStr));