百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

前端最常用的25个正则表达式,代码效率提高 80%

myzbx 2025-07-14 20:13 23 浏览

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

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

今天就给大家分享25个开发中常用的正则表达式吧!!!希望大家能提高代码效率!!!

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' // 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

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) {
returnnewRegExp(`^([1-9]+[\d]*(.[0-9]{1,${n}})?)前端最常用的25个正则表达式,代码效率提高 80% - 今日头条
) } // 保留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 = '粤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、密码强度的校验

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

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}}前端最常用的25个正则表达式,代码效率提高 80% - 今日头条
) } // 校验长度为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('|')
returnnewRegExp(`(${arr})前端最常用的25个正则表达式,代码效率提高 80% - 今日头条
) } 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))
// [
//   '<img src="sunshine.png" />',
//   'sunshine.png',
//   index: 11,
//   input: '<div></div><img src="sunshine.png" /><img src="sunshine111.png" />',
//   groups: undefined
// ]
console.log(imgReg.exec(htmlStr))
// [
//   '<img src="sunshine111.png" />',
//   'sunshine111.png',
//   index: 37,
//   input: '<div></div><img src="sunshine.png" /><img src="sunshine111.png" />',
//   groups: undefined
// ] 

22、匹配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
// ]

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))
// [
//   '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
// ]

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))
// [
//   '#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
// ]

25、匹配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))

相关推荐

OPPO Find X9手机曝料:6.6英寸屏幕、天玑9500芯片

IT之家8月27日消息,科技媒体xpertpick今天(8月27日)发布博文,报道称OPPO计划于今年10月推出FindX9系列旗舰手机,其中包括FindX9和...

OPPO Find X9系列搭载影像新硬件,支持Ultra级画质和色彩还原

IT之家8月27日消息,OPPOFindX9系列手机发布时间逐渐临近,目前官方已开启新机的前瞻预热。OPPOFind系列产品负责人周意保今日发文解释了厂商为什么现在都喜欢跨界合作这一...

我回来了!聊聊屏幕对续航的影响_屏幕耗电吗

时隔一周终于回国,让大家久等了本来上周日就能到家,结果在旧金山转机的时候把护照弄丢了…幸好后来被一位黑人大姐找到了,才能顺利回国,感谢勤劳朴实的美利坚人民。出差途中笔记本的续航是很重要的,刚好联想的产...

J人福音、P人救星,Lumix Flow如何重塑专业视频拍摄工作流

“等一下,刚才那个中景拍了没有?”“A机位的素材是哪一场的?”“完了,我忘了记哪一条是最好的了!”“今晚加个班,先把能用的素材挑出来……”作为经常一个人拍视频的内容创作者,这种崩溃称得上习以为常。如果...

realme史上最窄边框和下巴 realme GT Neo3正式发布

中关村在线消息:今天下午14点,realme召开真我GTNeo3发布会。realmeGTNeo3搭载6.7英寸2412×1080OLED直屏,其支持120Hz刷新率,360Hz触控采样率,智能...

用酒精擦屏幕,对屏幕的伤害有多大?

天府新青年你触手可及的朋友圈附录:1.不是所有电脑的屏幕都不能用酒精来擦,通常来说只有镜面屏屏幕才有涂层,这种不能用酒精擦;而雾面屏用的是另外一种抗反射技术,这种一般擦了没事。镜面屏和雾面屏特别好认...

windows11截屏快捷键是哪个?windows11快捷键设置大全

windows11键盘快捷方式就是键盘快捷方式就是按键或按键组合,可提供一种替代方式来执行通常使用鼠标执行的操作。下面就来分享下windows11截屏快捷键是哪个和windows11快捷键设置大全。一...

三星Galaxy S25 Slim配置曝光 6.7英寸屏幕搭配2亿像素主摄

【CNMO科技新闻】三星GalaxyS25系列将于北京时间1月23日正式发布,CNMO注意到有博主爆出了即将亮相GalaxyS25Slim的配置信息。据悉,GalaxyS25Slim将配备一...

两种手机屏幕到底有什么不一样?哪种手机屏幕更好?

一般来说,我们的手机屏幕只分为两种OLED和LCD,LCD是大火的一种手机屏幕,是千元机以及高端机的标配,OLED算是后起之秀,是近几年才渐渐兴起的一种类型的手机屏幕,那么这两种手机屏幕到底有什么不一...

有强芯才好用 这三款高性价比旗舰芯热机最低仅需1799元

在选购手机时,相信大家肯定都会把性能作为考虑的重点之一。而如果希望拥有出色的性能表现,一颗旗舰处理器是必不可少的。今天我就为大家汇总了几款采用旗舰处理器的底价新机,感兴趣的朋友千万不要错过。moto...

一文搞定FastDFS的搭建和使用_fastdfs怎么样

1.FastDFS概述FastDFS是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储、文件同步、文件访问(文件上传、文件下载)等,解决了大容量存储和负载均衡的问题。特别适合以文...

涨姿势!超级计算机用啥文件系统呢?

2015-10-1705:58:00作者:赵为民在计算机中,文件系统(filesystem)是一个非常重要的组件,你可以将他看做是操作系统的子系统,其实质就是一种软件的组件,通过文件系统我们可以...

Window as a VM:Chrome OS 现可窗口化运行其它 Linux 分支

这世上纵然有多种办法可以在Chromebook上安装运行ChromeOS和其它Linux分支多系统,但如果无需重启通过引导切换,确实是个很酷的改进。Google布道师Francois...

Win10新预览版19577开始推送:新图标+多项新功能

今日凌晨,微软正式向Windows10Insider快速通道用户推送了全新版本Windows10——Windows10InsiderPreviewBuild19577。19577版本是...

微软Windows升级密钥(例如家庭版升级为企业版)

下面的密钥,是微软官方提供的,仅能用于Windows10系统版本的升级,比如从家庭版升级为专业版、专业版升级为企业版等。升级密钥不能用于激活系统,激活需要KMS或者数字权利,由于涉及到版权问题,在此不...