实战指南:从字符类到分组反向引用)
开发工具前端【免费下载链接】it-toolsCollection of handy online tools for developers, with great UX.项目地址https://gitcode.com/GitHub_Trending/ittoo/it-tools点击查看免费下载正则表达式Regular Expression是每个开发者日常处理文本匹配、校验、替换的利器但它的元字符众多、记忆成本高。it-tools 内置了一个 JavaScript 正则表达式速查表Regex Cheatsheet位于/regex-memo路由以结构化表格的形式汇总了从字符类、转义规则、量化符、边界、断言到分组捕获的全部核心语法。本文将基于 regex-memo.content.md 这份速查表的完整内容逐项讲解每个语法单元的含义与用法并结合仓库源码说明该速查表在 it-tools 中的实现方式、与正则测试工具的联动关系帮助读者在写正则时快速对照、少踩坑。一、速查表在 it-tools 中的定位与实现it-tools 是一个面向开发者的在线工具箱集合。正则速查表是其中一项独立工具在 src/tools/index.ts 中通过import { tool as regexMemo } from ./regex-memo注册其工具定义为// src/tools/regex-memo/index.ts export const tool defineTool({ name: Regex cheatsheet, path: /regex-memo, description: Javascript Regex/Regular Expression cheatsheet, keywords: [regex, regular, expression, javascript, memo, cheatsheet], component: () import(./regex-memo.vue), icon: BrandJavascript, createdAt: new Date(2024-09-20), });从定义可以看出工具路径为/regex-memo描述明确标注是JavaScript正则速查表图标选用 JavaScript 语言标识创建于 2024-09-20。defineTool是 src/tools/tool.ts 提供的辅助函数它会基于createdAt字段自动计算isNew标记创建时间在两周内视为新工具因此这里的所有语法语义都应以JavaScript 正则引擎为基准理解。渲染层面regex-memo.vue 直接通过import Memo from ./regex-memo.content.md将 Markdown 文档作为组件引入并用 naive-ui 的主题变量useThemeVars()定制了表格边框、单元格内边距以及代码块的背景色与圆角使速查表在明暗主题下都能清晰可读。也就是说本文要讲解的核心内容完全来自 regex-memo.content.md 这份文档。此外该速查表并非孤立存在在 regex-tester.vue 的正则测试工具中输入框下方就有一个直达链接See Regular Expression Cheatsheet点击会跳转到/regex-memo方便在测试正则时随时查阅语法。读者完全可以一边在 regex-tester 里实验一边对照本速查表。二、普通字符与字符类Character Classes速查表的第一部分是普通字符与字符类它们定义了匹配什么样的单个字符表达式含义.或[^\n\r]匹配任意字符但不包括换行符\n或回车符\r[A-Za-z]匹配任意字母大小写均可[a-z]匹配小写字母[A-Z]匹配大写字母\d或[0-9]匹配数字\D或[^0-9]匹配非数字字符_匹配下划线\w或[A-Za-z0-9_]匹配字母、数字或下划线\W或[^A-Za-z0-9_]\w的反集非字母、非数字、非下划线\S\s的反集非空白字符几个要点需要特别留意.默认不匹配换行若要让它匹配包括换行在内的任意字符在 JavaScript 中需要开启sSingleline / dotAll标志这正是 regex-tester.vue 中提供的复选框选项之一。\w在 JavaScript 中默认等价于[A-Za-z0-9_]它对中文等非 ASCII 字母不敏感需要匹配其他语言文字时建议显式使用 Unicode 属性转义如\p{L}需配合u标志。\W、\S、\D分别是\w、\s、\d的反集注意它们匹配的是除某一类字符之外的任意字符而不是不匹配。三、空白字符Whitespace Characters处理缩进、换行、制表符等场景时空白字符类是最常用的表达式含义空格匹配空格本身\t匹配制表符Tab\n匹配换行符\r匹配回车符\s匹配空格、制表符、换行符或回车符即任意空白\s是一个组合拳只要目标是空白直接用\s即可无需分别写空格、\t、\n、\r。配合\S非空白使用常用于按空白切分文本、识别空行等场景。需要说明的是速查表把\s界定为空格、制表符、换行符或回车符这是 JavaScript 引擎的实际行为子集日常开发中通常以\s覆盖空白即可。四、字符集Character Set与否定字符集方括号表达式用于指定这些字符之一本质是对方括号内各字符的一次 OR 运算表达式含义[xyz]匹配x、y或z中任意一个[^xyz]匹配既不是x、y也不是z的任意字符[1-3]匹配1、2或3[^1-3]匹配既不是1、2也不是3的任意字符使用字符集时有三个约定必须牢记速查表原文要点字符集等同于 OR 运算[abc]就是匹配 a 或 b 或 c在方括号内指定多个候选字符时不用|。^表示否定^写在开头的[之后如[^xyz]表示匹配除这些之外的任意字符注意不要与行首锚点^混淆——在字符集内它是否定符在字符集外它才是字符串开头。字符集内的.是普通句点.在字符集内不代表任意字符而是字面意义的句号例如[.]匹配的是句号本身。五、需要转义的字符Escaping5.1 字符集之外在字符集之外以下元字符若要按字面意义匹配必须用反斜杠转义表达式含义\.句点period\^脱字符caret\$美元符号\|竖线pipe\\反斜杠\/正斜杠\(左圆括号\)右圆括号\[左方括号\]右方括号\{左花括号\}右花括号在 JavaScript 中构建正则时转义规则还多一层如果用字面量语法/\d/写正则转义符直接生效如果通过new RegExp(\\d)传字符串构建字符串本身也要转义一次即代码中要写双反斜杠。这是初学者最常见的转义失灵问题来源。5.2 字符集之内进入字符集之后绝大多数元字符自动失去特殊含义只有两个字符仍需要转义表达式含义\\反斜杠\]右方括号速查表还给出了两条补充规则^只有在紧跟在开头的[之后时即处于否定位才需要转义出现在字符集其他位置的^无需转义。-连字符只有在位于两个字母之间或两个数字之间时如[a-z]、[0-9]中的-才需要转义位于字符集首尾时它是字面连字符。六、量化符Quantifiers量化符用于控制前面表达式出现的次数它总是放在被量化的表达式之后速查表原话The quantifier goesafterthe expression to be quantified表达式含义{2}恰好出现 2 次{2,}至少出现 2 次{2,7}至少 2 次但不超过 7 次*出现 0 次或多次出现 1 次或多次?恰好出现 0 次或 1 次典型的组合示例\d{4}匹配恰好 4 位数字a匹配一个或多个连续的acolou?r同时匹配color与colouru出现 0 或 1 次。需要补充的是以上量化符默认是贪婪的尽量多匹配。JavaScript 标准正则还支持在量化符后追加?来切换为非贪婪/懒惰模式如*?、?、{2,7}?即尽量少匹配这在解析 HTML、提取引号内文本时非常实用。速查表虽未单列此项但这是与量化符配套的 JavaScript 原生语法可配合 regex-tester 实测验证。七、边界Boundaries边界锚点不消费字符只描述位置表达式含义^字符串开头$字符串结尾\b单词边界速查表对\b单词边界的匹配机制给出了精确定义它在以下三处成立字符串开头且第一个字符是\w单词字符字符串内部的相邻两字符之间若前一个是\w而后一个是\W非单词字符字符串结尾且最后一个字符是\w。借助这一规则\bword\b可以精确匹配独立的单词word而不会匹配到sword或wordy中的子串。^与$默认锚定的是整个字符串的头尾若希望按行匹配每行开头/结尾需要开启mMultiline标志这一标志同样在 regex-tester.vue 中以复选框形式提供。八、匹配、前瞻与后顾Lookahead / Lookbehind这一节覆盖了选择匹配与零宽断言表达式含义foo\|bar匹配foo或barfoo(?bar)匹配foo条件是它后面紧跟着bar正向前瞻foo(?!bar)匹配foo条件是它后面不是bar负向前瞻(?bar)foo匹配foo条件是它前面是bar正向后顾(?!bar)foo匹配foo条件是它前面不是bar负向后顾要点foo|bar是或运算注意|的优先级较低^foo|bar$实际表示以 foo 开头 或 以 bar 结尾若要限定整组需要在两侧加上括号如^(foo|bar)$。前瞻(?...)/(?!...)和后顾(?...)/(?!...)都是零宽断言它们只做检查不消耗字符、也不会进入匹配结果。因此(?bar)bar匹配到的仍然是bar断言部分不会重复输出。后顾断言Lookbehind在 JavaScript 中属于 ES2018 才引入的语法请确保运行环境Node.js / 浏览器支持该版本及以上。九、分组与捕获Grouping and Capturing表达式含义(foo)捕获组匹配并捕获foo(?:foo)非捕获组匹配foo但不捕获(foo)bar\1\1是第 1 个捕获组的反向引用整体匹配foobarfoo速查表特别强调捕获组只在以下三种方法中有实际意义string.match(regexp)—— 返回值数组会包含捕获组内容string.matchAll(regexp)—— 返回所有匹配及其捕获组的迭代器string.replace(regexp, callback)—— 回调参数中包含捕获组内容可用于基于分组做替换处理。反向引用的规则速查表原文要点\N是对第N个捕获组的反向引用捕获组从 1 开始编号\1表示第一个捕获组\2表示第二个依此类推。(?:...)非捕获组的价值在于当只需要分组应用量化符或|而无需保留捕获结果时使用非捕获组可以避免编号错乱、提升性能与可读性。例如(?:ab)匹配一个或多个连续的ab但不会额外占用捕获组编号。十、与 regex-tester 联动边查边测速查表与 it-tools 的 Regex Tester 配合使用效果最佳。regex-tester 页面提供正则输入框支持多行与待匹配文本输入框实时高亮匹配结果一组正则标志复选框Globalg、Case-insensitivei、Multilinem、Singlelines允许.匹配换行、Unicodeu、Unicode Setsv在u基础上提供更多 Unicode 特性页面内置See Regular Expression Cheatsheet链接一键跳转到/regex-memo。建议的实战流程是先在 regex-tester 中输入测试正则与文本、按需勾选标志当某个元字符语义不确定时跳到本速查表对照相应小节字符类、转义、量化符、边界、断言、分组确认后回到测试器验证形成查-测-改的闭环。结语it-tools 的 Regex Cheatsheet 以精炼的表格形态把 JavaScript 正则引擎中最常用的语法浓缩为一页可随时查阅的速查文档字符类与空白、字符集与否定、转义规则、量化符、边界、前瞻后顾、分组捕获与反向引用覆盖了日常文本处理 90% 以上的正则诉求。结合仓库中 regex-memo.content.md 这一原始文档、regex-memo/index.ts 的工具定义以及 regex-tester.vue 的联动设计开发者可以在 it-tools 中一站式完成查阅语法 实时测试 结果验证让正则编写从记忆负担变成随手可查的工程能力。赞分享开发工具前端【免费下载链接】it-toolsCollection of handy online tools for developers, with great UX.项目地址https://gitcode.com/GitHub_Trending/ittoo/it-tools点击查看免费下载相关推荐Unity3DTraining 正则表达式实战指南从字符类到 C 应用Unity3DTraining 正则表达式实战指南从字符类到 C 应用 本指南以仓库 Doc/正则表达式.md https://link.gitcode.co示例工程Hermes WebUI 数据库集成实战3 步接入外部数据源Hermes WebUI 数据库集成实战3 步接入外部数据源 AI 助手答得再准碰不到业务数据也帮不上忙。Hermes WebUI 的数据库集成解决的就是这人工智能AI 应用AI Agent交互助手MCP 服务前端从零学会正则表达式learn-regex 入门指南元字符、分组、环视与标志位实战全解从零学会正则表达式learn regex 入门指南元字符、分组、环视与标志位实战全解 正则表达式Regular Expression简称 regex教程上一篇Solana Arbitrage Bot实战案例Orca与Saber交易所间的无风险套利策略下一篇FunASR ARM 部署三步跑通从拉镜像到验证识别的完整路径创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考