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

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

yund56 2025-07-18 01:09 3 浏览

在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟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))

相关推荐

什么是JavaScript,它能做什么(javascript干啥的)

一个页面分成三个部分,结构,样式,行为。HTML代表了页面的结构(骨架),CSS代表了页面的样式(皮肤),JavaScript代表了页面的行为(这种行为是被动的)。主动的行为需要一个大脑,后端作为我们...

一款自定义字幕内容的截屏生成器:fake-screenshot!

这是一个可以伪造任何网站界面截图的工具。但本工具的目的其实不是破坏,而是为了警告:不要轻易相信网上看到的“截图”!本工具的目的是传递(如上的)信息,而不是破坏。因此所有经过本工具制作出来的截图都被打...

JavaScript-JavaScript 219

1)JavaScript简介JavaScript:是一种脚本语言(程序),脚本是一条条的文字命令,执行时由系统的一个解释器将其一条条的翻译成机器可识别的指令然后执行,脚本语言是不经编译而是解释执行的,...

Vue3 神级工具:终于可以实现打字的动画效果了!

Typed.js是一个轻量级的JavaScript库,用于在网页上实现打字机动画效果。它支持自定义打字速度、循环模式、回调函数等,非常适合用于动态展示标语、代码片段或交互式文本效果。核心特性打字...

好用的JavaScript客户端PDF插件——jsPDF

介绍和往常一样,jsPDF是一个开源的客户端的PDF解决方案,在之前的文章中已经介绍过几个Web端和PDF相关的库,jsPDF同样是一个不错的客户端PDF引SDK,你可以通过jsPDF在客户端完成相...

历时10个多月,学习了这132 个CSS 特效,还不来学习

这132个特效,是我历时10个多月在油管一个一个跟着敲出来的,为了加强记忆,每个练习,我都录制了视频,在这里分享出来给大家。大家可能又会调侃了,你是工作不饱和吧,有时间做这些。其实,我目前工作还是挺饱...

Flux.1 Kontext:用文字编辑图像(flux.1.kontext)

FLUX.1Kontext是来自BlackForestLabs的一款新图像编辑模型。它是用于通过文本提示编辑图像的最佳模型之一,并且是FLUX.1家族的最新成员。在我们的测试中,我们发...

采用Stylus 扩展让你的浏览器字体变得更美观

今天锋哥带大家来玩一个有意思的操作。我对字体有着很高的敏感度,我对网页默认的字体,不是很满意。突如其来的疯狂念头,我能不能把我们网页的所有字体,就是默认的字体,强制改为我喜欢的这个霞鹜文楷字体呢?答案...

JavaScript奇技淫巧:隐形字符(javascript字符型转数值型方法)

JavaScript奇技淫巧:隐形字符本文,分享一种奇特的JS编程技巧,功能是:可以使字符串“隐形”、不可见!效果展示如下图所示,一个字符串经物别的操作之后,其长度有621字节,但内容却是“隐形”不可...

Axure9原型设计:能增删改数据的动态饼图(2)

在本篇中,我们将延续上篇的设计思路,进一步探索如何在Axure9中实现“可增删改数据”的动态饼图效果。最近无聊,在网上闲逛,看到一篇教程《能增删改数据的动态饼图》,故仿照实践。因信息量较大,分三篇...

JavaScript奇淫技巧:命令行语法高亮

JavaScript奇淫技巧:命令行语法高亮本文,将实现命令行输出带有语法高亮、带行号的JS代码。效果如下图所示:对于JS程序员而言,这个效果是有些惊喜的。而实现起来,却似乎是出乎意料的简单。直接上源...

JS如何判断文字被ellipsis了?(js判断字符是否存在)

原文来源于:程序员成长指北;作者:嘉琪coder如有侵权,联系删除前言如果想要文本超出宽度后用省略号省略,只需要加上以下的css就行了。ellipsis{overflow:hidden;...

前端资源-实用的JS插件(前端js工具)

现在前端资源越来越多,有创意十足的,有实用性高的,这些对于设计师和前端人员来说都是不错的灵感和资源,所以我们可多关注这些信息,对自己的专业技术有也会帮助的。今天设计达人网为大家分享有:页面进度条、图像...

p5.js 中文入门教程(p5js编辑器不能用)

本文简介点赞+关注+收藏=学会了本文的目标是和各位工友一起有序的快速上手p5.js,会讲解p5.js的基础用法。本文会涉及到的内容包括:项目搭建p5.js基础2D图形文字图形样式...

创建酷炫动画效果的10个JavaScript库

Dynamics.js是设计基于物理规律的动画的重要JavaScript库。它可以赋予生命给所有包含CSS和SVG属性的DOM(文本对象模型)元素,换句话说,Dynamics.js适用于所有Java...