ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

easy-vibe 正则表达式指南:三类积木构建文本模式,从匹配原理到邮箱/手机号校验实战

2026/9/13 12:53:18 拓冰建站 浏览量
easy-vibe 正则表达式指南:三类积木构建文本模式,从匹配原理到邮箱/手机号校验实战 easy-vibe 正则表达式指南三类积木构建文本模式从匹配原理到邮箱/手机号校验实战【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本文基于 easy-vibe 课程仓库中正则表达式章节regex.md展开系统讲解正则表达式作为描述文本模式的迷你语言的核心思想用字符类、量词、位置与分组三类积木搭建任意匹配模式。读完后你将能够独立写出邮箱、手机号、密码强度等常见校验模式理解 JS/Python 中的正则 API 用法并从仓库中 RegexDemo.vue 交互组件的源码理解引擎逐字符扫描 贪心匹配 回溯的底层工作机制。一、为什么需要正则表达式先设想几个日常开发场景从一大段日志里找出所有 IP 地址验证用户输入的邮箱格式是否合法把文本中所有的日期格式从2024/01/15替换为2024-01-15从网页源码中提取所有链接。用普通字符串搜索你需要写一大堆if-else判断逻辑逐位检查、逐段拼接。用正则表达式一行模式即可搞定。正则表达式本质上不是咒语而是一门微型语言\\d代表数字代表一个或多个那么\\d就直白地表示一个或多个数字。理解了这一条剩下的只是词汇量的积累。二、核心概念像搭积木一样组合正则的本质是用三类积木搭出你想要的模式。2.1 积木一字符类匹配什么字符语法含义示例.任意字符a.c→ abc、a1c、a c\\d数字 [0-9]\\d\\d→ 42、99\\w字母/数字/下划线\\w→ hello、user_1\\s空白字符匹配空格、Tab[abc]集合中的任意一个[aeiou]→ 元音字母[^abc]不在集合中的[^0-9]→ 非数字字符字符类回答的问题是这一步可以匹配哪些字符。其中\\d、\\w、\\s是三个最常用的转义字符类覆盖数字、词字符与空白三类基本文本元素。^出现在中括号内部时含义不同——[^abc]表示取反匹配任何不是a/b/c 的字符。2.2 积木二量词匹配几次语法含义示例*0 次或多次ab*→ a、ab、abbb1 次或多次ab→ ab、abbb不匹配 a?0 次或 1 次colou?r→ color、colour{3}恰好 3 次\\d{3}→ 123{2,4}2 到 4 次\\d{2,4}→ 12、1234量词回答的问题是前一步要重复几次。*、、?是三个基础量词{n}与{n,m}则给出精确区间约束——后面校验中国手机号时就会用到\\d{9}这种写法。2.3 积木三位置和分组语法含义示例^行首^Hello→ 以 Hello 开头的行$行尾end$→ 以 end 结尾的行\\b单词边界\\bcat\\b→ cat不匹配 catch(...)捕获分组(\\d)-(\\d)→ 分别捕获a\|b或cat\|dog→ cat 或 dog^与$是锚点用于把匹配限制在整行的两端——写校验类正则时几乎总是需要它们否则1[3-9]\\d{9}会误匹配更长字符串中的一段。( )捕获分组能把匹配的子串单独取出来供后续引用或提取数据。三、实战应用三个高频校验模式3.1 邮箱格式校验[\w.-][\w-]\.[\w.]逐段拆解[\w.-]—— 用户名部分字母、数字、点、加号、短横线一个或多个—— 字面量 [\w-]—— 域名部分字母、数字、下划线、短横线\.—— 转义的点号.默认是任意字符必须转义才能匹配字面的点[\w.]—— 顶级域名部分。如果需要整串恰好是邮箱在首尾加锚点^[\w.-][\w-]\.[\w.]$。仓库中 RegexDemo 组件的国际化文案 里内置了这组测试用例userexample.com与a.bctest.org匹配通过invalid与no-user.com匹配失败可作为自测基准。3.2 中国手机号校验1[3-9]\d{9}拆解1—— 首位固定为 1[3-9]—— 第二位是 3 到 9\\d{9}—— 其后紧跟 9 位数字合计 11 位。加上锚点写成^1[3-9]\d{9}$可防止误匹配。组件源码中预设测试文本Contact: 13812345678 or 15099887766配合该模式能同时捕获两个号码。3.3 密码强度校验^(?.*[a-z])(?.*[A-Z])(?.*\d).{8,}$拆解(?.*[a-z])—— 前瞻断言整串中至少包含一个小写字母前瞻不消耗字符只做检查(?.*[A-Z])—— 至少包含一个大写字母(?.*\d)—— 至少包含一个数字.{8,}—— 总长度至少 8 个字符^...$—— 锚定整串。这是前瞻断言 锚点 长度量词三者组合的教科书式案例三个(?...)各自独立检查一种字符的存在性最后由.{8,}统一约束总长。测试用例中Passw0rd、MyPss123通过纯小写的password与长度不足的SHORT1a失败。四、在代码中使用正则JavaScriptconst text 联系方式13812345678 或 15099887766 const regex /1[3-9]\d{9}/g const phones text.match(regex) // [13812345678, 15099887766] // 替换 text.replace(/\d{4}(?\d{4}$)/, ****) // 用前瞻 (?\d{4}$) 定位替换时只影响被匹配部分 // 校验 /^[\w.-][\w-]\.[\w.]$/.test(userexample.com) // true要点/pattern/flags字面量语法中g标志让match返回所有匹配test方法则返回布尔值适合做表单校验。Pythonimport re text 价格 99 元优惠 20 元 numbers re.findall(r\d, text) # [99, 20] # 替换 re.sub(r\d, X, text) # 价格 X 元优惠 X 元 # 分组捕获 match re.search(r(\d)-(\d), 2024-01-15) match.group(1) # 2024 match.group(2) # 01要点re.findall提取所有匹配re.sub批量替换re.search返回匹配对象后用group(n)取第 n 个捕获分组——这正是第三节中(\\d)-(\\d)分组用法的落地方式。注意 Python 中习惯用原始字符串r...避免反斜杠被字符串转义吞掉。五、贪心与懒惰一个?的差别看这段文本bhello/b and bworld/b模式结果解释b.*/bbhello/b and bworld/b贪心尽可能匹配最长b.*?/bbhello/b懒惰尽可能匹配最短量词默认是贪心的看到.*会先一路吃到行尾然后在发现匹配失败后逐步退回回溯。在量词后加?则切换为懒惰模式匹配尽可能少的字符。处理 HTML 标签、成对引号这类从头标记到最近的尾标记的场景几乎总是要用懒惰模式。六、源码视角easy-vibe 的 RegexDemo 如何驱动一个正则引擎正则章节在课程站点中并非纯文字而是配套了一个可交互组件 RegexDemo.vue在 VitePress 主题中通过 theme/index.js 全局注册提供实时演练场、速查表、常用模式、可视化拆解四种模式。阅读它的脚本逻辑能直观印证第五节的引擎原理构造正则buildRegex(pattern, flags)用new RegExp(pattern, flags)动态构造正则对象构造失败时捕获异常并展示错误信息RegexDemo.vue 第 201-208 行——对应模式编译这一步执行匹配带g标志时循环调用regex.exec()直到返回null收集全部匹配并对空匹配break防止死循环第 215-234 行高亮渲染先把测试文本做 HTML 转义再用replace(regex, ...)把每处匹配包裹进mark标签第 236-249 行——这里正是一次真实的重置替换操作引擎流程可视化组件文案中的engineSteps把引擎工作拆为五步从左到右扫描 → 贪心匹配 → 回溯重试 → 记录捕获分组 → 返回结果en.js 第 637-643 行。这与第五节的结论一致正则引擎是贪心 回溯的扫描器?后缀改变的就是贪心/懒惰的默认策略。从组件源码结构看速查表中的每个符号条目都可以一键跳回演练场试跑tryCheat会把条目模式填入输入框常用模式卡片则直接展示匹配/不匹配两类样例等价于给每个模式配了迷你测试用例——这也是学习正则的好习惯每个模式都配上正例与反例。七、小结正则表达式 描述文本模式的迷你语言用于搜索、匹配、替换三大操作三类积木字符类匹配什么 量词匹配几次 位置/分组锚定与提取\\d、\\w、\\s是三个最高频的字符类覆盖数字、词字符与空白无需从零手写邮箱、手机号、URL 等常见场景都有成熟可复用的模式配合正/反例测试贪心与懒惰默认贪心尽可能多匹配量词后加?切换为懒惰尽可能少匹配。学完本章后可以沿仓库继续推进开发工具线的下一节环境变量与 PATH、SSH 与密钥认证。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考