企业官网建设流程全解析

• 开发工具
• 前端

正则表达式（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）

速查表的第一部分是普通字符与字符类，它们定义了"匹配什么样的单个字符"：

几个要点需要特别留意：

• .默认不匹配换行；若要让它匹配包括换行在内的任意字符，在 JavaScript 中需要开启s（Singleline / dotAll）标志，这正是 regex-tester.vue 中提供的复选框选项之一。
• \w在 JavaScript 中默认等价于[A-Za-z0-9_]，它对中文等非 ASCII 字母不敏感，需要匹配其他语言文字时建议显式使用 Unicode 属性转义（如\p{L}，需配合u标志）。
• \W、\S、\D分别是\w、\s、\d的"反集"，注意它们匹配的是"除某一类字符之外的任意字符"，而不是"不匹配"。

三、空白字符（Whitespace Characters）

处理缩进、换行、制表符等场景时，空白字符类是最常用的：

\s是一个"组合拳"：只要目标是空白，直接用\s即可，无需分别写空格、\t、\n、\r。配合\S（非空白）使用，常用于按空白切分文本、识别空行等场景。需要说明的是，速查表把\s界定为"空格、制表符、换行符或回车符"，这是 JavaScript 引擎的实际行为子集，日常开发中通常以\s覆盖空白即可。

四、字符集（Character Set）与否定

字符集（方括号表达式）用于指定"这些字符之一"，本质是对方括号内各字符的一次 OR 运算：

使用字符集时有三个约定必须牢记（速查表原文要点）：

1. 字符集等同于 OR 运算：[abc]就是"匹配 a 或 b 或 c"，在方括号内指定多个候选字符时不用|。
2. ^表示否定：^写在开头的[之后（如[^xyz]），表示匹配"除这些之外的任意字符"，注意不要与行首锚点^混淆——在字符集内它是否定符，在字符集外它才是"字符串开头"。
3. 字符集内的.是普通句点：.在字符集内不代表"任意字符"，而是字面意义的句号，例如[.]匹配的是句号本身。

五、需要转义的字符（Escaping）

5.1 字符集之外

在字符集之外，以下元字符若要按字面意义匹配，必须用反斜杠转义：

在 JavaScript 中构建正则时，转义规则还多一层：如果用字面量语法/\d+/写正则，转义符直接生效；如果通过new RegExp('\\d+')传字符串构建，字符串本身也要转义一次，即代码中要写双反斜杠。这是初学者最常见的"转义失灵"问题来源。

5.2 字符集之内

进入字符集之后，绝大多数元字符自动失去特殊含义，只有两个字符仍需要转义：

速查表还给出了两条补充规则：

• ^只有在紧跟在开头的[之后时（即处于否定位）才需要转义；出现在字符集其他位置的^无需转义。
• -（连字符）只有在位于两个字母之间或两个数字之间时（如[a-z]、[0-9]中的-）才需要转义；位于字符集首尾时它是字面连字符。

六、量化符（Quantifiers）

量化符用于控制前面表达式出现的次数，它总是放在被量化的表达式之后（速查表原话：The quantifier goesafterthe expression to be quantified）：

典型的组合示例：

• \d{4}匹配恰好 4 位数字；
• a+匹配一个或多个连续的a；
• colou?r同时匹配color与colour（u出现 0 或 1 次）。

需要补充的是：以上量化符默认是贪婪的（尽量多匹配）。JavaScript 标准正则还支持在量化符后追加?来切换为非贪婪/懒惰模式（如*?、+?、{2,7}?），即尽量少匹配，这在解析 HTML、提取引号内文本时非常实用。速查表虽未单列此项，但这是与量化符配套的 JavaScript 原生语法，可配合 regex-tester 实测验证。

七、边界（Boundaries）

边界锚点不消费字符，只描述位置：

速查表对\b（单词边界）的匹配机制给出了精确定义，它在以下三处成立：

1. 字符串开头，且第一个字符是\w（单词字符）；
2. 字符串内部的相邻两字符之间，若前一个是\w而后一个是\W（非单词字符）；
3. 字符串结尾，且最后一个字符是\w。

借助这一规则，\bword\b可以精确匹配独立的单词word，而不会匹配到sword或wordy中的子串。^与$默认锚定的是整个字符串的头尾；若希望按行匹配（每行开头/结尾），需要开启m（Multiline）标志，这一标志同样在 regex-tester.vue 中以复选框形式提供。

八、匹配、前瞻与后顾（Lookahead / Lookbehind）

这一节覆盖了选择匹配与零宽断言：

要点：

• foo|bar是"或"运算，注意|的优先级较低，^foo|bar$实际表示"以 foo 开头 或 以 bar 结尾"，若要限定整组需要在两侧加上括号，如^(foo|bar)$。
• 前瞻（(?=...)/(?!...)）和后顾（(?<=...)/(?<!...)）都是零宽断言：它们只做"检查"，不消耗字符、也不会进入匹配结果。因此(?=bar)bar匹配到的仍然是bar，断言部分不会重复输出。
• 后顾断言（Lookbehind）在 JavaScript 中属于 ES2018 才引入的语法，请确保运行环境（Node.js / 浏览器）支持该版本及以上。

九、分组与捕获（Grouping and Capturing）

速查表特别强调：捕获组只在以下三种方法中有实际意义：

1. string.match(regexp)—— 返回值数组会包含捕获组内容；
2. string.matchAll(regexp)—— 返回所有匹配及其捕获组的迭代器；
3. string.replace(regexp, callback)—— 回调参数中包含捕获组内容，可用于基于分组做替换处理。

反向引用的规则（速查表原文要点）：

• \N是对第N个捕获组的反向引用；
• 捕获组从 1 开始编号（\1表示第一个捕获组，\2表示第二个，依此类推）。

(?:...)非捕获组的价值在于：当只需要分组应用量化符或|，而无需保留捕获结果时，使用非捕获组可以避免编号错乱、提升性能与可读性。例如(?:ab)+匹配一个或多个连续的ab，但不会额外占用捕获组编号。

十、与 regex-tester 联动：边查边测

速查表与 it-tools 的 Regex Tester 配合使用效果最佳。regex-tester 页面提供：

• 正则输入框（支持多行）与待匹配文本输入框，实时高亮匹配结果；
• 一组正则标志复选框：Global（g）、Case-insensitive（i）、Multiline（m）、Singleline（s，允许.匹配换行）、Unicode（u）、Unicode Sets（v，在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 中一站式完成"查阅语法 + 实时测试 + 结果验证"，让正则编写从记忆负担变成随手可查的工程能力。

• 开发工具
• 前端