正则表达式可视化测试工具：输入即匹配，高亮一目了然

本案例用华为云 CodeArts 码道 WebUI 作为开发入口：在浏览器里打开码道对话窗口，用自然语言描述需求，

码道直接生成一个单文件 index.html 的正则表达式可视化测试工具，输入正则即实时匹配，命中结果高亮标注，

支持分组捕获、标志位切换、匹配详情展示。不用装 CLI、不用配 AK/SK，全程浏览器搞定，内置部署还能给出公网预览链接。

源码和截图全部开源在文末 Demo Park。

为什么需要正则可视化测试工具

正则表达式是开发中的利器------表单校验、日志提取、文本替换、爬虫解析，到处都用得上。但正则也是出了名的难写难调：

• 一串 \d{1,3}(\.\d+){0,3} 写完，肉眼根本看不出到底匹配了什么，更别说嵌套分组和前瞻后顾了。
• 在代码里跑正则，匹配结果只有一堆字符串，看不到具体命中位置和索引，调试全靠 console.log 逐条打印。
• 在线工具能用，但很多不支持实时高亮、不显示分组捕获、不支持多行模式，粘贴敏感文本到第三方网站也不放心。

最理想的方式是：输入正则立刻看到匹配效果------正则表达式和测试文本左右并排，输入即匹配，命中部分高亮标注，分组捕获逐个列出，标志位一键切换。这种工具自己写也不难，但要从零做一个体验好的------实时解析、高亮渲染、分组提取、错误提示、深色主题------还是需要花点功夫的。

这次用码道 WebUI，一句话需求就生成了完整的单文件应用。

码道开通（免费体验版）

开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后即可使用码道的 AI 编程能力，自然语言描述需求，自动生成代码并部署。

三种使用方式

码道提供三种使用方式，覆盖不同开发场景：

• WebUI（浏览器对话）：在 AI 开发者空间里打开码道对话窗口，用自然语言描述需求，码道自动创建项目、编写代码、启动部署。全程浏览器操作，零安装，最适合快速原型和 Demo 开发。本文用这种方式演示。
• TUI（终端命令行） ：在本地终端里运行 codearts 命令进入交互界面，适合需要本地文件系统操作、命令行工具开发的场景。
• 桌面 IDE（IDE 插件）：在 CodeArts IDE 里安装码道插件，边写代码边让 AI 补全、重构，适合正式项目开发。

进入 AI 开发者空间的步骤：

1. 浏览器打开 https://developer.huaweicloud.com/devspace/
2. 弹窗「请选择要进入的版本」→ 点击 体验版
3. 首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
4. 弹窗「临时凭据自动配置」→ 点击 同意，沙箱自动创建

进入主界面后，左侧菜单栏找到 CodeArts ，点击右侧的浏览器图标，弹出码道 WebUI 对话窗口，底部输入框提示「尽管吩咐，我来帮你搞定」。

小贴士：体验版沙箱 3 小时后自动重置，关键内容记得及时保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送（模型默认 glm-5.2，可直接用）：

开发一个正则表达式可视化测试工具网页：上方输入正则表达式和标志位（全局 g、忽略大小写 i、多行 m、点号通配 s），下方输入测试文本，输入即实时匹配，命中结果在文本中高亮标注（不同分组用不同颜色），右侧显示匹配列表（匹配内容、索引位置、分组捕获），支持正则语法错误提示，深色主题界面美观，单个网页即开即用。完成后用部署功能部署成可访问的网页应用，并告诉我访问地址。

需求发出后，左侧「任务」计数 +1，码道开始自动拆解任务、创建项目、编写代码。

开发过程

码道接收到需求后，自动完成了以下工作，整个过程约几分钟：

• 创建项目目录 /workspace/regex-tester
• 生成单文件 index.html，包含正则解析、实时匹配、高亮渲染、分组捕获提取、标志位切换、错误提示、深色主题等完整逻辑
• 启动 python3 -m http.server 部署 HTTP 服务
• curl 自检确认页面可访问

完成后码道输出任务摘要，包含内部预览访问地址和功能清单。打开预览链接即可使用工具。

功能解析

生成的正则表达式可视化测试工具是一个纯前端单文件应用，所有逻辑在 index.html 的 <script> 里。核心功能包括：

1. 实时匹配

输入正则表达式和测试文本后，无需点击任何按钮，即刻执行匹配：

• 正则表达式输入框内容变化时，自动重新编译并匹配
• 测试文本输入框内容变化时，自动重新匹配
• 匹配结果实时刷新，输入即反馈，调试效率极高

2. 匹配高亮

命中结果在测试文本中高亮标注，一目了然：

• 匹配到的文本用醒目的背景色标注
• 不同分组用不同颜色区分，嵌套分组层次清晰
• 未匹配的文本保持原样，与命中部分形成对比

3. 标志位切换

支持常用正则标志位，一键开关：

• g（全局匹配）：查找所有匹配项，不只是第一个
• i（忽略大小写）：大小写不敏感匹配
• m（多行模式） ：^ 和 $ 匹配每行的开头和结尾
• s（点号通配） ：. 匹配包括换行符在内的所有字符

4. 分组捕获展示

正则中的括号分组会被逐个提取并展示：

• 每个匹配项的分组捕获内容单独列出
• 显示分组编号和对应的捕获文本
• 嵌套分组按编号顺序排列，方便理解正则结构

5. 匹配详情列表

右侧面板展示所有匹配项的结构化信息：

• 每条匹配显示匹配内容 、起始索引 、结束索引
• 显示匹配总数统计
• 点击匹配项可定位到文本中的对应位置

6. 错误提示

正则语法错误时给出友好提示，不会页面崩溃：

• 正则表达式语法非法时，显示错误信息
• 错误位置和原因标注清晰，帮助快速修正
• 修正后自动恢复实时匹配

7. 深色主题

界面采用深色主题，长时间使用不刺眼：

• 深色背景 + 高对比度文字
• 高亮颜色在深色背景下更鲜明
• 正则输入区、文本测试区、匹配结果区视觉分离，布局清晰

运行效果

实际验证：打开页面后上方输入正则表达式（如 \d{1,3}(\.\d{1,3}){0,3}）并勾选标志位，下方粘贴测试文本，命中部分立刻高亮标注；切换标志位，匹配结果实时变化；右侧匹配列表逐条显示匹配内容、索引位置和分组捕获；正则写错时底部弹出错误提示，修正后恢复正常。整个过程输入即响应，无需任何手动触发。

直接试玩

这个工具已经完整开源（源代码、本文档、全部截图），托管在 Demo Park 仓库：

• Demo Park 仓库：https://atomgit.com/deli007/demo_park
• 本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-regex-tester

打开上面的链接，进入 codearts-regex-tester 文件夹，把 index.html 下载到本地，浏览器打开即可使用。输入任意正则表达式和测试文本，立刻看到匹配高亮和分组详情，无需安装任何依赖。

总结

一次需求生成一个能用的正则表达式可视化测试工具，从实时匹配、高亮渲染、分组捕获到标志位切换和错误提示，全部由码道 WebUI 完成。不需要自己搭框架、写解析逻辑，只要把功能和交互说清楚，码道就交付了一个体验完整的工具。而且自带部署，内置预览链接打开即用，不需要自己配服务器。

WebUI 的优势在于零安装零配置：浏览器打开码道对话窗口，输入自然语言需求，代码生成、项目创建、HTTP 部署一条龙完成。对于这种单文件工具类应用，从想法到可运行的产品只需要一句话。想体验这种从自然语言直接到可运行工具的流程，免费开通码道体验版：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz