正则表达式可视化工具
免费的正则表达式可视化工具，支持匹配过程可视化、高亮显示、分组颜色、逐步匹配，附带正则语法速查表，适合新手学习正则语法。
工具简介
正则表达式可视化工具是一款帮助开发者理解和学习正则表达式的工具。通过可视化匹配过程、高亮显示匹配结果、展示捕获组，让抽象的正则语法变得直观易懂。
主要功能
- 实时匹配：输入正则表达式和测试字符串，实时显示匹配结果
- 可视化高亮：在测试字符串中高亮显示匹配的部分
- 捕获组展示：用不同颜色标识各个捕获组的内容
- 逐步匹配：展示正则匹配的详细步骤，适合学习原理
- 语法速查表：提供完整的正则语法参考，随时查阅
- 常用示例：提供邮箱、手机号、URL等常见正则示例
使用说明
- 输入正则表达式：在"正则表达式"输入框中输入正则（不需要写前后的
/）
- 设置标志：在右侧输入正则标志（
g=全局，i=忽略大小写，m=多行）
- 输入测试字符串：在"测试字符串"文本框中输入要匹配的文本内容
- 查看匹配结果：下方会实时显示匹配数量、高亮效果和详细信息
- 查看捕获组：如果正则表达式包含捕获组
()，会显示每个组匹配的内容
- 启用逐步匹配：勾选"显示逐步匹配过程"，查看匹配的详细步骤
正则语法速查表
字符匹配
| 语法 |
说明 |
. |
任意单个字符（除换行符） |
\d |
数字字符 [0-9] |
\D |
非数字字符 [^0-9] |
\w |
单词字符 [a-zA-Z0-9_] |
\W |
非单词字符 |
\s |
空白字符（空格、Tab等） |
\S |
非空白字符 |
量词
| 语法 |
说明 |
* |
0次或多次 |
+ |
1次或多次 |
? |
0次或1次 |
{n} |
恰好n次 |
{n,} |
至少n次 |
{n,m} |
n到m次 |
*? |
非贪婪模式（尽可能少） |
位置锚点
| 语法 |
说明 |
^ |
字符串开头 |
$ |
字符串结尾 |
\b |
单词边界 |
\B |
非单词边界 |
分组与引用
| 语法 |
说明 |
(abc) |
捕获组 |
(?:abc) |
非捕获组 |
(?<name>abc) |
命名捕获组 |
\1 |
反向引用第1组 |
a|b |
或（a或b） |
[abc] |
字符集（a或b或c） |
[^abc] |
非字符集 |
标志（Flags）
| 标志 |
说明 |
g |
全局匹配（查找所有） |
i |
忽略大小写 |
m |
多行模式（^$匹配每行） |
s |
单行模式（.匹配换行） |
常用正则示例
| 需求 |
正则表达式 |
| 邮箱 |
\w+@\w+\.\w+ |
| 手机号（中国） |
1[3-9]\d{9} |
| URL |
https?://\S+ |
| IP地址 |
\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} |
| 日期（YYYY-MM-DD） |
\d{4}-\d{2}-\d{2} |
适合人群
- 正则新手：通过可视化理解正则匹配原理
- 开发者：快速测试和调试正则表达式
- 学生：学习正则语法，理解捕获组和量词
- 数据分析师：验证文本提取的正则是否正确
技术原理
本工具使用 JavaScript 原生的 RegExp 对象进行正则匹配，通过 match() 和 exec() 方法获取匹配结果和捕获组。所有操作均在浏览器本地完成，正则表达式和测试字符串不会上传到服务器，请放心使用。
常见问题
为什么我的正则没有匹配？
请检查：
- 正则表达式语法是否正确（查看错误信息）
- 是否缺少必要的转义符（如
. 要写成 \.）
- 标志是否设置正确（如需要全局匹配要加
g）
什么是捕获组？
捕获组是用圆括号 () 包裹的正则部分，可以单独提取匹配的内容。例如正则 (\d+)\.(\d+) 匹配 "12.34" 时，组1是 "12"，组2是 "34"。
贪婪模式和非贪婪模式有什么区别？
- 贪婪模式
* +：尽可能多地匹配
- 非贪婪模式
*? +?：尽可能少地匹配
例如匹配 <div>text</div>：
- 贪婪
.<*：匹配整个字符串
- 非贪婪
.<*?：只匹配 <div>
相关工具
欢迎使用正则表达式可视化工具！如有问题或建议，请联系我们。