news 2026/6/18 11:43:21

【Java Web学习 | 第14篇】JavaScript(8) -正则表达式

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
【Java Web学习 | 第14篇】JavaScript(8) -正则表达式

【Java Web学习 | 第14篇】JavaScript(8) —— 正则表达式

正则表达式(Regular Expression,简称 regex / regexp)是处理字符串匹配、搜索、替换、提取、验证等操作时最强大的工具之一,几乎是现代前端开发、数据校验、日志处理等领域必备技能。

一、正则表达式到底是什么?

用最通俗的话说:

正则表达式就是一套描述字符串特征的“规则/模板”
然后拿这个模板去跟目标字符串比对,看它符不符合这个规则。

常见用途举例:

验证手机号 1[3-9]\d{9} 验证邮箱 ^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,})+$ 提取所有数字 \d+ 判断是否全为中文 ^[\u4e00-\u9fa5]+$ 替换所有空格 \s+ → "" 校验密码强度 (?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}

二、JavaScript 中创建正则的两种方式

// 方式1:字面量(最常用,推荐)constreg1=/hello/i;// i = ignore case 忽略大小写// 方式2:构造函数(动态创建时使用)constkeyword="world";constreg2=newRegExp(keyword,"ig");// 第二个参数是修饰符字符串

两种方式的本质区别

// 字面量会在代码解析时就创建正则对象constr1=/ab+c/;// 固定不变// 构造函数会在运行时才创建,可以动态拼接规则lettype="jpg|png|gif";constimgReg=newRegExp(`\\.(${type})$`,"i");

三、正则表达式核心组成(必须掌握)

组成部分符号/写法含义记忆口诀
普通字符abc123匹配本身写啥匹配啥
元字符. ^ $ * + ? () [] {} \\d \D \w \W \s \S特殊功能的符号
字符类[abc] [^abc] [a-z] [0-9]匹配其中任意一个字符 / 不在其中的字符方括号选一个
量词* + ? {n} {n,} {n,m}控制前面内容的重复次数数量词
定位符^ $ \b \B匹配位置(开头、结尾、单词边界)位置钉子
分组(abc) (?:abc)把多个字符当一个整体处理小括号分组
a|b或者竖线选边站
转义. \ / \n \t让元字符变普通字符反斜杠逃跑
修饰符/reg/i /reg/g /reg/m /reg/s全局、忽略大小写、多行、.匹配换行性格标签

四、常用正则写法速查表(建议收藏)

用途正则表达式说明
手机号(大陆)/^1[3-9]\d{9}$/11位,以1开头
邮箱/1+@[\w-]+.[\w-.]+$/比较宽松版
纯数字/^\d+$/至少一个数字
中文姓名/2{2,16}$/2~16个汉字,可含·
密码(强)/^(?=.\d)(?=.[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,20}$/必须包含大小写字母+数字
URL/https?😕/[\w.-]+.[\w-.]+(:\d+)?(/[\s]*)?$/简单版
身份证号(18位)/(^\d{15}$)(^\d{17}[\dXx]$)/
日期(yyyy-mm-dd)/^\d{4}-(0[1-9]1[0-2])-(0[1-9]
6~18位字母数字下划线/3{6,18}$/常见用户名规则

五、JavaScript 中常用的正则方法(重点)

conststr="Hello World! Hello JavaScript 2025!";// 1. test() —— 返回 boolean(有没有匹配到)console.log(/\d{4}/.test(str));// true// 2. exec() —— 返回匹配详情数组(最强大,但只找第一个)constreg=/(\w+)\s+(\w+)/i;constresult=reg.exec("Hello World");console.log(result);// ["Hello World", "Hello", "World", index: 0, input: "..."]// 3. match() —— 返回所有匹配结果(配合 g 修饰符)console.log(str.match(/\b\w{5}\b/g));// ["Hello", "World", "Hello", "JavaS"]// 4. matchAll() —— 返回迭代器,包含所有匹配详情(推荐)for(constmofstr.matchAll(/(\w+)\s+(\w+)/g)){console.log(m[0],m[1],m[2]);}// 5. replace() / replaceAll() —— 替换console.log(str.replace(/\d{4}/g,"2026"));// 替换年份console.log(str.replace(/Hello/g,"Hi"));// 替换所有Hello// 6. search() —— 返回第一个匹配位置索引(没有返回-1)console.log(str.search(/java/i));// 12(不区分大小写)// 7. split() —— 用正则切分console.log("a1b2c3d".split(/\d/));// ["a", "b", "c", "d"]

六、推荐学习进阶路径(2025-2026 实用路线)

阶段目标推荐资源/练习方式
入门掌握基本符号、量词、定位符regex101.com(神器!)
熟练能写常见校验、提取、替换写 10 个常见表单校验
进阶理解捕获组、反向引用、零宽断言《精通正则表达式》+ LeetCode正则题
高手能看懂复杂正则、写高性能正则分析开源项目里的正则写法
实战处理日志、爬虫、代码生成等真实场景写一个简易日志解析器

最后送一句口诀(背下来很有用)

“先定位、再匹配、别贪婪、善用组、别忘了转义”

  • 先定位(^ $ \b)
  • 再匹配具体内容
  • 别贪婪(尽可能少匹配用 ?)
  • 善用捕获组和非捕获组
  • 元字符要转义

祝你早日把正则玩得溜溜的~
下一篇文章见!🚀


  1. \w.- ↩︎

  2. \u4e00-\u9fa5· ↩︎

  3. a-zA-Z0-9_ ↩︎

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/7 16:50:30

AI人脸隐私卫士处理延迟分析:影响因素与优化路径

AI人脸隐私卫士处理延迟分析:影响因素与优化路径 1. 引言:智能打码背后的技术挑战 随着数字影像的普及,个人隐私保护成为社会关注的焦点。在社交媒体、公共监控、企业文档等场景中,人脸信息的泄露风险日益增加。传统的手动打码方…

作者头像 李华
网站建设 2026/6/18 2:33:00

GLM-4.6V-Flash-WEB部署总失败?控制台操作步骤详解

GLM-4.6V-Flash-WEB部署总失败?控制台操作步骤详解 智谱最新开源,视觉大模型。 1. 背景与问题定位:为何GLM-4.6V-Flash-WEB部署常失败? 1.1 视觉大模型的部署痛点 随着多模态AI的发展,GLM-4.6V-Flash-WEB作为智谱最新…

作者头像 李华
网站建设 2026/6/12 18:42:45

智能隐私保护云方案:AI人脸卫士SaaS部署

智能隐私保护云方案:AI人脸卫士SaaS部署 1. 引言:为何需要智能人脸自动打码? 随着社交媒体、公共监控和数字办公的普及,图像与视频中的人脸信息正以前所未有的速度被采集和传播。尽管技术带来了便利,但随之而来的隐私…

作者头像 李华
网站建设 2026/6/15 14:41:28

隐私保护自动化实战:AI人脸卫士批量处理教程

隐私保护自动化实战:AI人脸卫士批量处理教程 1. 引言 1.1 业务场景描述 在社交媒体、企业宣传、新闻报道等场景中,图像内容的发布越来越频繁。然而,未经处理的人物面部信息可能带来严重的隐私泄露风险,尤其是在多人合照或公共场…

作者头像 李华
网站建设 2026/6/16 23:50:04

Wallpaper Engine壁纸下载器完整教程:轻松获取创意工坊海量资源

Wallpaper Engine壁纸下载器完整教程:轻松获取创意工坊海量资源 【免费下载链接】Wallpaper_Engine 一个便捷的创意工坊下载器 项目地址: https://gitcode.com/gh_mirrors/wa/Wallpaper_Engine 还在羡慕别人桌面上那些炫酷的动态壁纸吗?想要免费拥…

作者头像 李华
网站建设 2026/6/15 17:01:07

AI人脸隐私卫士参数详解:高斯模糊效果调优

AI人脸隐私卫士参数详解:高斯模糊效果调优 1. 背景与核心挑战 在数字内容日益泛滥的今天,图像和视频中的人脸信息泄露已成为不可忽视的隐私风险。无论是社交媒体分享、监控系统存档,还是企业内部资料流转,未经脱敏处理的人脸数据…

作者头像 李华