代码写得好，这25个正则表达式少不了

1. 1. 手机号码的校验
2. 2. 邮箱的校验
3. 3. 身份证的校验
4. 4. URL 的校验
5. 5. IPv4 的校验
6. 6. 日期 YYYY-MM-DD
7. 7. 日期 YYYY-MM-DD hh:mm:ss
8. 8. 16 进制颜色的校验
9. 9. 整数的校验
10. 10. 小数的校验
11. 11. 保留 n 位小数
12. 12. 邮政编号的校验
13. 13. QQ 号的校验
14. 14. 微信号的校验
15. 15. 车牌号的校验
16. 16. 只含字母的字符串
17. 17. 包含中文的字符串
18. 18. 密码强度的校验
19. 19. 字符串长度 n 的校验
20. 20. 文件拓展名的校验
21. 21. 匹配 img 和 src
22. 22. 匹配 html 中的 style
23. 23. 匹配 html 中的注释
24. 24. 匹配 htmlTag（html 标签）
25. 25. 匹配 html 中的颜色

在日常的前端开发中，正则表达式是非常有用的，正则表达式在每个语言中都是可以使用的，他就跟JSON一样，是通用的。在开发中，了解一些常用的正则表达式，能大大提高你的工作效率，例如：

• 字符串的匹配
• 表单项的格式校验

今天我就给大家分享 25 个前端开发中常用的正则表达式，希望能提高大家的 coding 效率！

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 emailReg = /^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/

const emailStrWY = '956666@163.com' // 163 邮箱
const emailStrQQ = '956666@qq.com' // qq 邮箱
console.log(emailReg.test(emailStrWY)) // true
console.log(emailReg.test(emailStrQQ)) // true

const noEmail = '72873213.com'
console.log(emailReg.test(noEmail)) // false

3. 身份证的校验

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

4. URL 的校验

const urlReg = /^((https?|ftp|file)://)?([da-z.-]+).([a-z.]{2,6})([/w .-]*)*/?$/

const urlStr1 = 'https://haha.mybj123.com/xxx/xxx'
console.log(urlReg.test(urlStr1)) // true

const urlStr2 = 'sss://haha.mybj123.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. 日期 YYYY-MM-DD

const dateReg = /^d{4}(-)d{1,2}1d{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

7. 日期 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

8. 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

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 号的校验

说明：5-11 位数字

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. 微信号的校验

说明：6 至 20 位，以字母开头，字母，数字，减号，下划线

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 = '冀 B12345'
console.log(carNoReg.test(carNoStr1)) // true

const carNoStr2 = '北京 A12345'
console.log(carNoReg.test(carNoStr2)) // false

16. 只含字母的字符串

const letterReg = /^[a-zA-Z]+$/

const letterStr1 = 'mybj'
console.log(letterReg.test(letterStr1)) // true

const letterStr2 = 'mybj_123'
console.log(letterReg.test(letterStr2)) // false

17. 包含中文的字符串

const cnReg = /[u4E00-u9FA5]/

const cnStr1 = '我是，签约作者 frontCode'
console.log(cnReg.test(cnStr1)) // true

const cnStr2 = 'frontCode'
console.log(cnReg.test(cnStr2)) // false

18. 密码强度的校验

说明：密码中必须包含字母、数字、特称字符，至少 8 个字符，最多 30 个字符

const passwordReg = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}/

const password1 = 'mybj123.com..'
console.log(passwordReg.test(password1)) // true

const password2 = 'mybj123com'
console.log(passwordReg.test(password2)) // false

19. 字符串长度 n 的校验

function checkStrLength(n) {
  return new RegExp(`^.{${n}}$`)
}

// 校验长度为 3 的字符串
const lengthReg = checkStrLength(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 = 'mybj.jpg'
console.log(filenameReg.test(filename1)) // true
const filename2 = 'mybj.png'
console.log(filenameReg.test(filename2)) // true
const filename3 = 'mybj.txt'
console.log(filenameReg.test(filename3)) // true
const filename4 = 'mybj.md'
console.log(filenameReg.test(filename4)) // false

21. 匹配 img 和 src

const imgReg = /<img.*?src=["|']?(.*?)["|']?s.*?>/ig

const htmlStr = '<div></div><img src="mybj.png" /><img src="mybj111.png" />'

console.log(imgReg.exec(htmlStr))
// [
//   '<img src="mybj.png" />',
//   'mybj.png',
//   index: 11,
//   input: '<div></div><img src="mybj.png" /><img src="mybj111.png" />',
//   groups: undefined
// ]
console.log(imgReg.exec(htmlStr))
// [
//   '<img src="mybj111.png" />',
//   'mybj111.png',
//   index: 37,
//   input: '<div></div><img src="mybj.png" /><img src="mybj111.png" />',
//   groups: undefined
// ]

22. 匹配 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))
// [
//   'style="background:#000;">',
//   '>',
//   index: 5,
//   input: '<div style="background:#000;"><span style="color:#fff"></span></div>',
//   groups: undefined
// ]
console.log(styleReg.exec(htmlStr))
// [
//   'style="color:#fff">',
//   '>',
//   index: 36,
//   input: '<div style="background:#000;"><span style="color:#fff"></span></div>',
//   groups: undefined
// ]

23. 匹配 html 中的注释

const noteReg = /<!--(.*?)-->/g

const htmlStr = '<!--一个 div 标签--> <div></div> <!--一个 div 标签--> <div></div>'

console.log(noteReg.exec(htmlStr))
// [
//   '<!--一个 div 标签-->',
//   '一个 div 标签',
//   index: 0,
//   input: '<!--一个 div 标签--> <div></div> <!--一个 div 标签--> <div></div>',
//   groups: undefined
// ]
console.log(noteReg.exec(htmlStr))
// [
//   '<!--一个 div 标签-->',
//   '一个 div 标签',
//   index: 27,
//   input: '<!--一个 div 标签--> <div></div> <!--一个 div 标签--> <div></div>',
//   groups: undefined
// ]

24. 匹配 htmlTag（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))
console.log(endReg.exec(htmlStr))
console.log(endReg.exec(htmlStr))
console.log(endReg.exec(htmlStr))
console.log(endReg.exec(htmlStr))

25. 匹配 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))
// [
//   '#000',
//   '000',
//   index: 23,
//   input: '<div style="background:#000;"><span style="color:#fff"></span></div>',
//   groups: undefined
// ]
console.log(colorReg.exec(htmlStr))
// [
//   '#fff',
//   'fff',
//   index: 49,
//   input: '<div style="background:#000;"><span style="color:#fff"></span></div>',
//   groups: undefined
// ]

以上就是今天为大家分享的前端开发在日常的工作中，经常用到的正则表达式。希望对大家有用，感谢阅读。