百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML 游戏HTML5 支持CSS 谷歌字体
当前位置：网站首页 > 技术文章 > 正文

手把手写给前端的正则表达式【基础篇】

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


作者：savokiss

转载链接：
https://segmentfault.com/a/1190000021145901

1. 概览

在 JavaScript 中，使用 // 即可创建一个正则表达式对象，当然也可以使用 new RegExp()

常用的跟正则相关的方法有 match、test 和 replace。其中 match，replace 都是字符串上的方法， test 是正则对象上的方法。

下面看具体的图示：

2. 匹配单字符

  1. /reg/ 可以直接匹配具体的字符串 reg。
  2. /[arzy]/ 中的中括号[] 则代表匹配 arzy 中的任意单个字符
  3. /[f-h]/ 中的中杠 - 代表匹配字母表顺序中 f 到 h 中的任意单个字符
  4. /[1-3]/ 则代表匹配数字 1 到 3

3. 正则选项

正则对象的后面也可以跟选项，JavaScript 中常用的选项有：

  1. i - 代表忽略大小写
  2. m - 代表多行匹配
  3. g - 代表全局匹配（可以匹配多次）

4. 边界匹配

  1. ^ - 代表匹配字符串的开头
  2. $ - 代表匹配字符串的结尾

5. 字符匹配

  1. . - 可以匹配除了换行符外的任意字符
  2. \d - 可以匹配任意数字
  3. \D - 可以匹配任意非数字
  4. \s - 匹配任意空白字符
  5. \S - 匹配任意非空白字符
  6. \n - 匹配换行
  7. \w - 它其实就等同于 [A-Za-z0-9_]，即匹配字母数字下划线

6. 量词匹配

  1. * - 匹配 0 次或多次
  2. + - 匹配 1 次或多次
  3. ? - 匹配 0 次或 1 次
  4. {3} - 匹配 3 次
  5. {2,4} - 匹配 2、3 或 4 次
  6. {2,} - 匹配 2 次或多次

7. 分组

() 小括号在正则中代表分组，一般在 match 方法中用来返回全匹配加上多个分组结果，如果使用了 g 选项，则只返回全匹配。

在小括号中你可以使用管道符号 |，它代表或

8. 特殊字符

匹配特殊符号的时候需要加反斜杠 \

JS 中的特殊字符有 ^ $ \ . * + ? () [] {} |

所以如果你需要匹配星号 *，就需要这样写：

\*

9. 取非匹配

匹配除了某个字符的任意字符，需要在中括号[] 中使用 ^

至此 ^ 具有两个含义：

  1. 如果用于正则表达式的开头，代表匹配字符串的开头
  2. 如果用于中括号 [] 内部，则代表匹配非此字符

10. 完

上面只是介绍了正则表达式中的基本用法，在日常开发中基本就够用了。更深入的用法比如 贪婪和懒惰、零宽断言 和 捕获 ，感兴趣的小伙伴可以自行学习~

正则很强大，但是也不能滥用。如果你写出了一个很复杂的只有你能看懂的正则，更好的做法是不使用正则去实现它~

最后如果文章和笔记能带您一丝帮助或者启发，请不要吝啬你的赞和收藏，你的肯定是我前进的最大动力

相关推荐

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或者数字权利，由于涉及到版权问题，在此不...

一周热门
最近发表
标签列表