Regex Test Preview

一个用于测试和预览正则表达式的VSCode插件，支持自动实时高亮显示匹配结果。参考了 JetBrains Regexp Tester 的设计理念。

✨ 核心特性

• 🎯 自动实时匹配 - 输入正则表达式和文本，自动显示高亮匹配结果
• 🎨 文本高亮显示 - 匹配的文本以蓝色背景高亮，清晰直观
• ⚡ 无需按钮操作 - 移除了多余的测试按钮，输入即匹配
• 🔄 Canvas背景技术 - 使用Canvas绘制高亮背景，彻底解决文字叠加问题
• 🎛️ 标志支持 - 支持正则表达式标志（g, i, m, s, u, y）
• 🛡️ 错误处理 - 友好的错误提示和状态显示
• 🚀 性能优化 - 300ms防抖技术，流畅的用户体验
• 🌙 主题适配 - 深色主题设计，完美融入VSCode环境
• 📱 高DPI支持 - 支持Retina显示器，锐利渲染

📦 安装指南

可直接在VSCode插件市场中搜索

方法一：安装 VSIX 文件（推荐）

1. 下载 VSIX 文件

   • 获取 regex-test-preview-0.0.1.vsix 文件

2. 在 VSCode 中安装

   • 打开 VSCode
   • 按 Ctrl+Shift+P 打开命令面板
   • 输入 "Extensions: Install from VSIX"
   • 选择下载的 VSIX 文件

3. 重新加载 VSCode

   • 安装完成后，按 Ctrl+Shift+P
   • 输入 "Developer: Reload Window"
   • 选择重新加载窗口

方法二：开发模式安装

1. 克隆项目

   git clone <repository-url>
   cd RegexTestPreview
   

2. 安装依赖

   npm install
   

3. 编译代码

   npm run compile
   

4. 在 VSCode 中调试

   • 打开项目文件夹
   • 按 F5 启动调试会话
   • 在新窗口中测试插件

验证安装

1. 检查插件列表

   • 按 Ctrl+Shift+X 打开扩展面板
   • 搜索 "Regex Test Preview"
   • 确认插件已安装

2. 测试功能

   • 按 Ctrl+Shift+P
   • 输入 "Regex Test Preview"
   • 选择 "Open Regex Test Preview"
   • 测试正则表达式功能

🚀 使用方法

启动插件

1. 安装插件后，按 Ctrl+Shift+P
2. 输入 "Regex Test Preview" 或 "Open Regex Test Preview"
3. 选择命令打开测试面板

界面说明

在打开的面板中：

• 正则表达式输入框：输入正则表达式模式
• 标志输入框：输入正则标志（默认为 g）
• 测试文本区域：可直接编辑的文本区域，背景显示高亮匹配结果
• 状态栏：显示匹配数量和错误信息

操作步骤

1. 在第一个输入框中输入正则表达式
2. 在标志框中输入正则标志（可选）
3. 在文本区域中输入或编辑测试文本
4. 查看自动高亮的匹配结果

快捷键

• Ctrl+Shift+P → "Regex Test Preview" - 打开正则测试面板
• Escape - 快速切换到高亮查看模式

📚 示例演示

1. 数字匹配

正则表达式: \d+
标志: g
测试文本: Hello 123 World 456 Test 789
预期结果: 数字 123、456、789 会被高亮显示

2. 邮箱验证

正则表达式: [a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}
标志: g
测试文本:
支持以下邮箱:
- user@example.com
- test.email+alex@company.org
- user_name@sub.domain.co.uk
- invalid.email@ (这个不会被匹配)

3. 手机号提取

正则表达式: 1[3-9]\d{9}
标志: g
测试文本:
联系方式:
张三: 13812345678
李四: 15987654321
王五: 12345678901 (格式不正确)

4. URL匹配

正则表达式: https?://[^\s]+
标志: g
测试文本:
有用的网站:
- https://www.google.com
- http://github.com
- https://regex101.com

5. 提取HTML标签

正则表达式: <[^>]+>
标志: g
测试文本: <div class="container"><p>Hello <strong>World</strong></p></div>

6. 日期格式匹配

正则表达式: \d{4}[-/]\d{1,2}[-/]\d{1,2}
标志: g
测试文本:
重要日期:
2024-01-01
2024/12/25
2024-2-14

7. 匹配单词（忽略大小写）

正则表达式: \btest\w*
标志: gi
测试文本: This is a Test of testing functionality

标志说明

• g - 全局匹配（查找所有匹配项）
• i - 忽略大小写
• m - 多行模式
• s - 点号匹配换行符
• u - Unicode模式
• y - 粘性匹配

🏗️ 技术架构与演进

当前技术方案（Canvas + Textarea）

核心原理：

• textarea 用于文本输入，位于上层（z-index: 2）
• canvas 作为背景层，用于绘制高亮（z-index: 1）
• 无叠加：文字和背景完全分离，不会有任何叠加问题

技术特点：

1. 精确文本测量 - 使用 ctx.measureText() 获取真实的字符宽度
2. 高DPI支持 - 支持 devicePixelRatio 实现锐利渲染
3. 改进的定位算法 - 使用真实文本宽度计算X坐标
4. 按行分组处理 - 将匹配项按行分组处理，支持多行匹配
5. 滚动同步优化 - 使用CSS transform同步滚动

技术演进历程

版本1.0：初始实现

• 使用隐藏的textarea + 显示的div
• 需要点击切换编辑模式
• 高亮显示有延迟

版本2.0：Overlay实时高亮

• 使用透明的overlay覆盖在textarea上方
• 实现了真正的实时高亮
• 但出现了文字叠加和对齐问题

版本3.0：Canvas背景高亮（当前）

• 使用Canvas绘制高亮背景
• 彻底解决文字叠加问题
• 支持精确对齐和高DPI显示

核心技术

• TypeScript: 主要开发语言
• VSCode Extension API: 插件框架
• Webview: UI界面实现
• Canvas API: 高亮背景绘制
• HTML/CSS/JavaScript: 前端技术
• 正则表达式: 核心功能

🔧 故障排除与已知问题修复

已修复的主要问题

1. 页面初始化问题

问题：插件界面出现JavaScript错误，缺少初始文本内容 解决：

• 恢复初始文本内容
• 增强错误处理机制
• 改进初始化逻辑

2. 文字叠加问题

问题：textarea和overlay的文字没有完全对齐，高亮背景遮盖文字 解决：

• 放弃overlay方案
• 使用Canvas + textarea组合方案
• 彻底解决文字叠加问题

3. 高亮对齐问题

问题：高亮和实际匹配文本出现对齐偏差 解决：

• 使用精确文本测量而非估算
• 支持高DPI渲染
• 改进定位算法

常见问题解答

Q: 插件无法启动？

A: 确保 VSCode 版本 >= 1.74.0，并重新加载窗口。

Q: 正则匹配不工作？

A: 检查正则表达式语法是否正确，确保标志使用正确。

Q: 高亮不显示？

A: 确保输入了有效的正则表达式和测试文本。

Q: 高亮位置不准确？

A: 插件使用精确文本测量，如有偏差请检查字体设置是否为等宽字体。

Q: 如何编辑文本？

A: 文本区域始终可编辑，直接点击即可编辑。

Q: 如何卸载插件？

A: 在扩展面板中找到 Regex Test Preview，点击卸载按钮。

Q: 支持哪些正则标志？

A: 支持 g, i, m, s, u, y 等常用标志。

Q: 插件是否会保存我的正则表达式？

A: 当前版本不会保存，建议您复制常用的正则表达式到其他地方。

🛠️ 开发指南

构建要求

• Node.js 16+
• VSCode 1.74+
• TypeScript 4.9+

项目结构

RegexTestPreview/
├── src/
│   └── extension.ts          # 主要扩展逻辑
├── out/                      # 编译输出目录
├── resources/
│   └── icons/
│       └── regex-icon.svg    # 插件图标
├── .vscode/
│   ├── launch.json           # 调试配置
│   └── tasks.json            # 任务配置
├── package.json              # 项目配置
├── tsconfig.json             # TypeScript配置
├── .eslintrc.json           # ESLint配置
├── .vscodeignore            # VSCode忽略文件
├── .gitignore               # Git忽略文件
├── README.md                # 项目说明
└── LICENSE                  # 许可证文件

开发命令

npm install          # 安装依赖
npm run compile      # 编译代码
npm run watch        # 监听模式编译
npm run lint         # 代码检查
npm run package      # 打包插件
npm run publish      # 发布插件

调试方法

1. 按 F5 启动调试会话
2. 在新的VSCode窗口中测试插件

📊 发布指南

发布前的准备工作

1. 配置package.json

   {
     "publisher": "YOUR_PUBLISHER_NAME",
     "repository": {
       "type": "git",
       "url": "https://github.com/YOUR_USERNAME/regex-test-preview.git"
     },
     "license": "MIT"
   }
   

2. 获取Publisher Name

   • 访问 Visual Studio Code Marketplace
   • 登录并创建Publisher名称

3. 发布插件

   npm install -g @vscode/vsce
   vsce login YOUR_PUBLISHER_NAME
   npm run publish
   

发布检查清单

• [ ] 代码编译无错误：npm run compile
• [ ] 代码规范检查：npm run lint
• [ ] 插件能正常启动：按 F5 测试
• [ ] 所有功能正常工作
• [ ] README.md 内容完整
• [ ] package.json 字段正确
• [ ] 版本号合适

🤝 贡献指南

欢迎提交Issue和Pull Request！

提交Issue

1. 描述问题的详细信息
2. 提供复现步骤
3. 包含相关的错误信息
4. 说明您的VSCode版本和插件版本

提交Pull Request

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 创建 Pull Request

未来改进方向

1. 保存历史记录: 记住常用的正则表达式
2. 导入/导出: 支持正则表达式的导入导出
3. 语法提示: 正则表达式语法高亮和自动补全
4. 更多标志: 支持更多正则引擎的标志
5. 性能统计: 显示匹配性能数据
6. 测试用例: 内置常用的正则表达式示例
7. 主题自定义: 支持自定义高亮颜色

📝 更新日志

v0.0.1 (最新)

• ✅ 自动实时匹配 - 无需按钮，输入即匹配
• ✅ Canvas背景高亮 - 彻底解决文字叠加问题
• ✅ 精确对齐 - 使用真实文本测量，完美对齐
• ✅ 高DPI支持 - 支持Retina显示器
• ✅ 性能优化 - 300ms防抖技术
• ✅ 界面优化 - 自适应宽度和一致样式
• ✅ 错误处理 - 友好的错误提示
• ✅ 完整文档 - 详细的使用指南和示例

技术演进

• v0.0.1-alpha: 初始实现，基本功能
• v0.0.1-beta: 添加实时高亮，overlay方案
• v0.0.1-rc: 修复文字叠加问题，Canvas方案
• v0.0.1: 优化对齐，高DPI支持，正式发布

📄 许可证

MIT License

---

享受自动实时高亮的正则表达式测试体验！ ⚡

如果这个插件对您有帮助，请给个⭐️鼓励一下！