---

• 🎨 正则输入 — 带有 /pattern/flags 风格的输入框，支持 g i m s u 标志位一键切换
• 📋 预设模板 — 内置邮箱、手机号、URL、IP 地址、HTML 标签、日期等常用正则，开箱即用
• 🔍 可视化解析 — 将正则表达式解析为 AST，以铁路图形式展示：
  • 字面量、点号、字符类、简写（\d、\w、\s）
  • 捕获组 / 非捕获组 / 命名组 / 前瞻后顾
  • 量词（*、+、?、{n,m}）及贪婪/非贪婪模式
  • 交替（|）分支、锚点（^、$）、反向引用
• 💡 自然语言解释 — 用人话解读正则表达式的含义，降低理解门槛
• ⚡ 实时匹配 — 输入测试文本后即时高亮所有匹配项
• 📊 匹配详情 — 展示每个匹配的位置、捕获组内容
• 🔗 分享功能 — 一键生成可分享的链接
• 🌙 深色/浅色主题 — 支持主题切换，舒适的视觉体验
• 📤 导出功能 — 支持将铁路图导出为 SVG / PNG

• Node.js >= 22.12.0

# 克隆项目
git clone https://cnb.cool/hakurei/RegexVision.git
cd regex-show

# 安装依赖
npm install

# 启动开发服务器
npm run dev

浏览器访问 http://localhost:5173 即可使用。

# 构建生产版本
npm run build

# 预览构建产物
npm run preview

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

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

# 构建镜像
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 云原生构建

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建你的特性分支 (git checkout -b feature/amazing-feature)
3. 提交你的修改 (git commit -m 'feat: add amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 发起 Pull Request

本项目基于 MIT License 开源。