一款基于 Vite + React 的正则表达式可视化工具，帮助你直观理解正则逻辑、实时测试匹配结果。

• 正则输入 — 带有 /pattern/flags 风格的输入框，支持 g i m s u 标志位一键切换
• 预设模板 — 内置邮箱、手机号、URL、IP 地址、HTML 标签、日期等常用正则，开箱即用
• 可视化解析 — 将正则表达式解析为 AST，以铁路图形式展示：
  • 字面量、点号、字符类、简写（\d、\w、\s）
  • 捕获组 / 非捕获组 / 命名组 / 前瞻后顾
  • 量词（*、+、?、{n,m}）及贪婪/非贪婪模式
  • 交替（|）分支、锚点（^、$）、反向引用
• 实时匹配 — 输入测试文本后即时高亮所有匹配项
• 匹配详情 — 展示每个匹配的位置、捕获组内容

• Node.js >= 22.12.0

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览构建产物
npm run preview

src/
├── utils/
│   └── regexParser.js          # 正则表达式 AST 解析器
├── hooks/
│   └── useRegex.js             # 正则编译 / 匹配逻辑 Hook
├── components/
│   ├── RegexInput.jsx          # 正则输入 + 标志位 + 预设模板
│   ├── TestArea.jsx            # 测试文本输入区域
│   ├── MatchResult.jsx         # 匹配高亮 + 详情列表
│   └── RegexVisualizer.jsx     # AST 铁路图可视化
├── App.jsx                     # 主布局
├── App.css                     # 组件样式
├── index.css                   # 全局深色主题
└── main.jsx                    # 应用入口

项目使用 Caddy 作为静态文件服务器，支持一键 Docker 部署：

# 构建项目
npm run build

# 构建镜像
docker build -t regex-vision .

# 运行容器
docker run -d --name regex-vision --restart unless-stopped -p 80:80 regex-vision

生产级 Caddy 配置包含：

• Gzip / Zstd 压缩
• 静态资源长期缓存（带 hash 文件 1 年不可变）
• CSP / HSTS / Permissions-Policy 等安全响应头
• SPA 路由回退
• /health 健康检查端点
• 非 root 用户运行

类别	技术
框架	React 19
构建	Vite 8
Web 服务	Caddy 2
容器化	Docker
CI/CD	CNB 云原生构建

MIT