Regex Test Preview

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

✨ 核心特性

🎯 双模式操作 - 粘贴模式和输入模式，满足不同使用场景
📋 一键粘贴功能 - 快速清空并粘贴剪切板内容，自动高亮匹配
✍️ 手动输入模式 - 输入文本后点击按钮执行高亮，避免光标干扰
🎨 文本高亮显示 - 匹配的文本以黄色背景高亮，清晰直观
🖥️ IME输入法兼容 - 完美支持中文输入法，无拼音字符泄露
🎪 光标位置稳定 - 输入模式下光标完全稳定，无跳转问题
🔄 HTML高亮技术 - 使用innerHTML动态更新，精确光标位置管理
🎛️ 标志支持 - 支持正则表达式标志（g, i, m, s, u, y）
🛡️ 错误处理 - 友好的错误提示和状态显示
🚀 性能优化 - 智能防抖技术，流畅的用户体验
🌙 主题适配 - 深色主题设计，完美融入VSCode环境

📦 安装指南

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

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

releases中下载 VSIX 文件
- 获取 regex-test-preview-x.x.x.vsix 文件
在 VSCode 中安装
- 打开 VSCode
- 按 Ctrl+Shift+P 打开命令面板
- 输入 "Extensions: Install from VSIX"
- 选择下载的 VSIX 文件
重新加载 VSCode
- 安装完成后，按 Ctrl+Shift+P
- 输入 "Developer: Reload Window"
- 选择重新加载窗口

方法二：开发模式安装

克隆项目

git clone <repository-url>
cd RegexTestPreview

安装依赖
```
npm install
```
编译代码
```
npm run compile
```
在 VSCode 中调试
- 打开项目文件夹
- 按 F5 启动调试会话
- 在新窗口中测试插件

验证安装

检查插件列表
- 按 Ctrl+Shift+X 打开扩展面板
- 搜索 "Regex Test Preview"
- 确认插件已安装
测试功能
- 按 Ctrl+Shift+P
- 输入 "Regex Test Preview"
- 选择 "Open Regex Test Preview"
- 测试正则表达式功能

🚀 使用方法

启动插件

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

界面说明

在打开的面板中：

正则表达式输入框：输入正则表达式模式
标志选择框：下拉选择正则标志（默认为 g）
模式切换按钮：切换粘贴模式和输入模式
操作按钮：根据模式显示不同的操作按钮
测试文本区域：可直接编辑的文本区域，支持实时高亮匹配结果
状态栏：显示匹配数量和错误信息

操作模式

📋 粘贴模式（推荐用于快速测试）

适用场景：从其他地方复制文本进行快速正则测试

操作步骤：

选择"粘贴模式"
输入正则表达式和选择标志
点击"📋 清空并粘贴剪切板内容"按钮
查看自动高亮的匹配结果
手动输入文本时也会实时高亮（500ms延迟）

特点：

一键粘贴，无需手动清空
自动高亮显示匹配结果
响应速度快，适合快速验证

✍️ 输入模式（推荐用于精确编辑）

适用场景：手动编写测试文本，精确控制匹配过程

操作步骤：

选择"输入模式"
输入正则表达式和选择标志
在文本区域中输入或编辑测试文本
点击"✨ 高亮显示"按钮执行匹配
查看高亮的匹配结果

特点：

输入过程中光标完全稳定
无自动高亮干扰，专注编辑
手动控制匹配时机
支持中文输入法，无拼音泄露

快捷操作

Ctrl+Shift+P → "Regex Test Preview" - 打开正则测试面板
模式切换：点击顶部的模式按钮
粘贴内容：在粘贴模式下点击粘贴按钮
执行高亮：在输入模式下点击高亮显示按钮

快捷键

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 - 粘性匹配

🏗️ 技术架构与演进

当前技术方案（contenteditable + HTML高亮）

核心原理：

contenteditable div 用于文本输入和高亮显示
innerHTML 动态更新实现实时高亮效果
光标位置管理 精确保存和恢复光标位置
文本复制技术 通过重建HTML实现高亮覆盖

技术特点：

实时高亮渲染 - 通过innerHTML动态更新实现即时高亮效果
光标位置管理 - 实现完整的光标位置保存和恢复机制
文本复制技术 - 重建HTML内容实现精确的高亮覆盖
DOM节点遍历 - 使用TreeWalker API高效遍历文本节点
Selection/Range API - 精确控制光标位置和选择状态

技术演进历程

版本1.0：初始实现

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

版本2.0：Overlay实时高亮

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

版本3.0：Canvas背景高亮

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

版本4.0：contenteditable实时高亮

使用contenteditable div统一编辑和显示
实现文本复制高亮技术
修复光标位置错乱问题
极简界面设计，无需按钮操作

版本5.0：双模式操作 + IME兼容性（当前）

双模式架构：粘贴模式和输入模式，满足不同使用场景
IME输入法完美兼容：修复中文拼音泄露问题，支持流畅的中文输入
光标位置彻底稳定：输入模式下光标完全稳定，无跳转现象
智能焦点管理：避免输入过程中焦点被意外转移
用户体验优化：提供直观的模式切换和操作按钮

核心技术

TypeScript: 主要开发语言
VSCode Extension API: 插件框架
Webview: UI界面实现
contenteditable: 可编辑文本区域
Selection/Range API: 光标位置控制
TreeWalker API: DOM节点遍历
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      # 发布插件

调试方法

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

📊 发布指南

发布前的准备工作

配置package.json

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

获取Publisher Name
- 访问 Visual Studio Code Marketplace
- 登录并创建Publisher名称

发布插件

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

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

提交Pull Request

Fork 项目
创建功能分支
提交更改
创建 Pull Request

未来改进方向

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

📝 更新日志

v1.0.3 (2025-11-21) - 双模式架构 + IME兼容性 🎉

✨ 双模式操作 - 粘贴模式和输入模式，满足不同使用场景
📋 一键粘贴功能 - 快速清空并粘贴剪切板内容，自动高亮匹配
✍️ 手动输入模式 - 输入文本后点击按钮执行高亮，避免光标干扰
🖥️ IME输入法完美兼容 - 修复中文拼音泄露问题，支持流畅的中文输入
🎪 光标位置彻底稳定 - 输入模式下光标完全稳定，无跳转现象
🎨 界面设计优化 - 直观的模式切换按钮和操作说明
📚 完整技术文档 - 详细记录双模式架构和IME兼容性实现

v1.0.2 (2024-11-14)

🐛 修复: 输入框焦点丢失问题，防止输入内容出现在错误位置
🔧 改进: 实现焦点感知的高亮更新机制
📚 新增: 添加焦点管理Bug修复技术文档

v1.0.1 (2024-10-28)

🐛 修复: contenteditable中逐字输入字符倒序显示的问题
🔧 改进: 实现了精确的光标位置保存和恢复机制
📚 新增: 添加了详细的技术文档和Bug修复报告

v1.0.0 (2024-10-27)

🎉 发布: 正式版本发布
✨ 特性: 实时高亮、多行支持、极简界面
🚀 性能: 优化渲染性能和用户体验

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支持，正式发布

📚 技术文档

Bug修复报告详情

光标位置Bug修复 (v1.0.1)

问题描述

在使用contenteditable div实现实时高亮功能时，出现字符倒序显示问题：

用户逐字输入文本时，字符会出现倒序显示
例如：输入"14"会显示为"41"

根本原因分析

DOM重建导致光标丢失 - 调用innerHTML重新设置内容时，原有DOM节点被销毁，光标引用失效
浏览器光标行为 - contenteditable的光标基于DOM节点位置，DOM重建后光标重置到开头
高亮更新与用户输入冲突 - 实时高亮更新频率高，没有正确的同步机制

修复方案

实现了完整的光标位置管理机制：

// 保存光标位置函数
function getCursorOffset(element) {
    const selection = window.getSelection();
    if (!selection.rangeCount) return 0;

    const range = selection.getRangeAt(0);
    const preCaretRange = range.cloneRange();
    preCaretRange.selectNodeContents(element);
    preCaretRange.setEnd(range.endContainer, range.endOffset);

    // 计算光标在纯文本中的偏移量
    const plainText = preCaretRange.toString();
    return plainText.length;
}

// 恢复光标位置函数
function setCursorPosition(element, offset) {
    const textContent = element.innerText || element.textContent || '';
    const maxOffset = Math.min(offset, textContent.length);

    // 使用TreeWalker遍历所有文本节点
    const walker = document.createTreeWalker(
        element,
        NodeFilter.SHOW_TEXT,
        null,
        false
    );

    let currentOffset = 0;
    let targetNode = null;
    let targetOffset = 0;

    while (walker.nextNode()) {
        const node = walker.currentNode;
        const nodeLength = node.textContent.length;

        if (currentOffset + nodeLength >= maxOffset) {
            targetNode = node;
            targetOffset = maxOffset - currentOffset;
            break;
        }

        currentOffset += nodeLength;
    }

    // 设置光标到目标位置
    if (targetNode) {
        const range = document.createRange();
        const selection = window.getSelection();
        range.setStart(targetNode, targetOffset);
        range.collapse(true);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

长文本高亮定位Bug修复

问题背景

长文本的高亮定位不准确，匹配文本的高亮位置与原文本不对应，多行文本中出现错位现象。

根本原因分析

Canvas方案问题 - 使用固定字符宽度（8px）不准确，中文字符宽度与英文字符不同
DOM测量方案问题 - 频繁创建/销毁DOM元素影响性能，测量结果不一致

最终解决方案：文本复制高亮技术

放弃复杂的坐标计算，采用更直接的文本复制方法：

function applyHighlights(matches) {
    if (!matches || matches.length === 0) {
        textEditor.innerHTML = escapeHtml(currentText);
        return;
    }

    // 保存光标位置
    const cursorOffset = getCursorOffset(textEditor);

    // 构建高亮HTML
    let highlightedHTML = '';
    let lastEnd = 0;

    matches.forEach((match, index) => {
        // 添加匹配前的普通文本
        highlightedHTML += escapeHtml(currentText.substring(lastEnd, match.start));
        // 添加高亮的匹配文本
        highlightedHTML += '<span class="highlight">' + escapeHtml(match.text) + '</span>';
        lastEnd = match.end;
    });

    // 添加剩余的文本
    highlightedHTML += escapeHtml(currentText.substring(lastEnd));

    // 应用高亮
    textEditor.innerHTML = highlightedHTML;

    // 恢复光标位置
    setTimeout(() => {
        setCursorPosition(textEditor, cursorOffset);
    }, 0);
}

方案优势：

精确性 - 直接基于文本位置构建HTML，避免坐标计算误差
简洁性 - 代码简单易懂，维护成本低
可靠性 - 不依赖复杂的DOM测量或Canvas计算
性能好 - 避免频繁的DOM操作和测量

焦点管理Bug修复 (v1.0.2)

问题描述

在Regular Expression输入框中输入时，焦点会意外转移到Test Text编辑器，导致用户输入的字符出现在错误位置。

根本原因分析

selection.addRange() 不仅设置光标位置，还会将焦点转移到目标元素，即使用户正在输入框中编辑，也会强制焦点转移到contenteditable div。

修复方案：焦点感知的高亮更新

修改高亮应用逻辑，只在必要时恢复光标位置：

function applyHighlights(matches) {
    if (!matches || matches.length === 0) {
        textEditor.innerHTML = escapeHtml(currentText);
        return;
    }

    // 检查当前焦点是否在文本编辑器中
    const activeElement = document.activeElement;
    const isTextEditorFocused = activeElement === textEditor;

    // 保存当前光标位置（仅当焦点在文本编辑器中时）
    let cursorOffset = 0;
    if (isTextEditorFocused) {
        cursorOffset = getCursorOffset(textEditor);
    }

    // ... 构建高亮HTML的代码 ...

    // 应用高亮
    textEditor.innerHTML = highlightedHTML;

    // 恢复光标位置（仅当焦点在文本编辑器中时）
    if (isTextEditorFocused) {
        setTimeout(() => {
            setCursorPosition(textEditor, cursorOffset);
        }, 0);
    }
}

关键改进：

焦点感知 - 检测当前焦点所在的控件
条件性操作 - 只在必要时恢复光标位置
用户体验 - 不会中断用户的输入操作
智能判断 - 避免不必要的DOM操作

双模式架构实现 (v1.0.3)

架构设计理念

问题背景：

自动高亮更新导致光标位置不稳定
IME输入法兼容性问题
不同使用场景需要不同的交互模式

解决方案：实现双模式架构，根据使用场景提供不同的交互方式：

// 模式状态管理
let currentMode = 'paste'; // 'paste' 或 'input'

// 模式切换函数
function switchMode(mode) {
    currentMode = mode;

    if (mode === 'paste') {
        // 粘贴模式：自动高亮
        textEditor.placeholder = '点击粘贴按钮或直接输入文本...';
        // 显示粘贴控件，隐藏输入控件
        pasteControls.style.display = 'flex';
        inputControls.style.display = 'none';
    } else {
        // 输入模式：手动高亮
        textEditor.placeholder = '输入文本后点击高亮显示按钮...';
        // 显示输入控件，隐藏粘贴控件
        inputControls.style.display = 'flex';
        pasteControls.style.display = 'none';
    }
}

粘贴模式实现

核心特点：

一键清空并粘贴剪切板内容
自动执行正则匹配和高亮显示
支持手动输入时的实时高亮（500ms延迟）

技术实现：

// 粘贴剪切板功能
pasteClipboardBtn.addEventListener('click', async () => {
    try {
        const text = await navigator.clipboard.readText();
        if (text) {
            // 清空当前内容
            textEditor.textContent = '';
            currentText = '';

            // 设置新内容
            textEditor.textContent = text;
            currentText = text;

            // 自动执行高亮
            if (patternInput.value) {
                testRegex();
            }
        }
    } catch (error) {
        statusDiv.textContent = '无法读取剪切板内容: ' + error.message;
    }
});

输入模式实现

核心特点：

输入过程中光标完全稳定
无自动高亮干扰
手动控制匹配时机
完美支持IME输入法

技术实现：

// 输入事件处理（区分模式）
textEditor.addEventListener('input', () => {
    // 立即更新文本内容
    currentText = getPlainContent(textEditor);

    // 根据当前模式决定是否自动高亮
    if (currentMode === 'paste') {
        // 粘贴模式：自动高亮（延迟500ms）
        if (patternInput.value && currentText !== lastTextContent) {
            clearTimeout(textInputTimeout);
            textInputTimeout = setTimeout(() => {
                testRegex();
                lastTextContent = currentText;
            }, 500);
        }
    } else {
        // 输入模式：不自动高亮，等待用户点击按钮
        lastTextContent = currentText;
    }
});

// 手动高亮按钮
highlightBtn.addEventListener('click', () => {
    currentText = getPlainContent(textEditor);
    if (patternInput.value && currentText) {
        testRegex();
    }
});

IME输入法兼容性修复 (v1.0.3)

问题描述

用户反馈：

中文输入时拼音字符会直接显示在编辑器中
例如：输入"我"（拼音"wo"），w字符会直接插入到文本中
输入体验差，影响正常使用

根本原因分析

beforeinput事件缺失过滤 - 没有正确处理输入法组合事件
composition事件处理不当 - 输入法开始和结束时机判断错误
高亮更新时机冲突 - 输入过程中触发高亮更新干扰输入法

修复方案

完整的IME兼容性实现：

// 输入法状态跟踪
let isComposing = false;

// beforeinput事件过滤（防止拼音泄露）
textEditor.addEventListener('beforeinput', (event) => {
    if (isComposing) {
        // 输入法组合期间，阻止非文本输入
        if (event.inputType !== 'insertText' ||
            event.data && !/^[\p{L}\p{N}\s]$/u.test(event.data)) {
            event.preventDefault();
        }
    }
});

// compositionstart事件
textEditor.addEventListener('compositionstart', (event) => {
    isComposing = true;
    // 输入法开始，暂停所有高亮更新
});

// compositionend事件
textEditor.addEventListener('compositionend', (event) => {
    isComposing = false;
    // 输入法结束后延迟更新，让输入法稳定
    setTimeout(() => {
        currentText = getPlainContent(textEditor);
        if (patternInput.value && currentMode === 'paste') {
            testRegex();
        }
    }, 100);
});

// 修改高亮应用逻辑
function applyHighlights(matches) {
    // 如果正在使用输入法组合，延迟高亮更新
    if (isComposing) {
        return;
    }

    // 正常的高亮应用逻辑
    const cursorOffset = getCursorOffset(textEditor);
    // ... 应用高亮
    restoreCursorFromTextOffset(textEditor, cursorOffset);
}

// 光标恢复函数也需要IME检查
function restoreCursorFromTextOffset(element, textOffset) {
    // 如果正在使用输入法组合，不恢复光标位置
    if (isComposing) {
        return;
    }

    // 正常的光标恢复逻辑
    // ...
}

关键改进点

beforeinput事件过滤 - 阻止输入法组合期间的无效输入
composition状态管理 - 准确跟踪输入法状态
延迟更新机制 - 输入法结束后延迟100ms再更新
光标保护 - 输入法期间不进行光标操作
模式感知 - 在输入模式下完全避免自动更新

核心技术要点总结

1. Selection和Range API

window.getSelection() - 获取当前选择对象
selection.getRangeAt(0) - 获取当前Range
range.cloneRange() - 克隆Range进行计算
range.setStart/setEnd - 设置Range边界

2. TreeWalker API

document.createTreeWalker() - 创建DOM遍历器
NodeFilter.SHOW_TEXT - 只遍历文本节点
walker.nextNode() - 遍历到下一个节点

3. 焦点管理原则

最小干扰 - 尽量不改变用户的焦点状态
智能判断 - 根据上下文决定是否需要操作焦点
用户优先 - 用户的操作意图应该被尊重

4. 性能优化经验

避免复杂的坐标计算 - 在Web环境中，文本位置的计算很难做到完全精确
优先使用文本操作 - 直接基于字符串操作比DOM测量更可靠
简单方案往往是最好的 - 复杂的解决方案通常意味着更多的潜在bug和更高的维护成本

版本更新日志

v1.0.2 (2024-11-14)

🐛 修复: 输入框焦点丢失问题，防止输入内容出现在错误位置
🔧 改进: 实现焦点感知的高亮更新机制
📚 新增: 添加焦点管理Bug修复技术文档

v1.0.1 (2024-10-28)

🐛 修复: contenteditable中逐字输入字符倒序显示的问题
🔧 改进: 实现了精确的光标位置保存和恢复机制
📚 新增: 添加了详细的技术文档和Bug修复报告

v1.0.0 (2024-10-27)

🎉 发布: 正式版本发布
✨ 特性: 实时高亮、多行支持、极简界面
🚀 性能: 优化渲染性能和用户体验

📄 许可证

MIT License

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

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

Regex Test Preview

qinxiao

Regex Test Preview

✨ 核心特性

📦 安装指南

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

方法二：开发模式安装

验证安装

🚀 使用方法

启动插件

界面说明

操作模式

📋 粘贴模式（推荐用于快速测试）

✍️ 输入模式（推荐用于精确编辑）

快捷操作

快捷键

📚 示例演示

1. 数字匹配

2. 邮箱验证

3. 手机号提取

4. URL匹配

5. 提取HTML标签

6. 日期格式匹配

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

标志说明

🏗️ 技术架构与演进

当前技术方案（contenteditable + HTML高亮）

技术演进历程

版本1.0：初始实现

版本2.0：Overlay实时高亮

版本3.0：Canvas背景高亮

版本4.0：contenteditable实时高亮

版本5.0：双模式操作 + IME兼容性（当前）

核心技术

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

已修复的主要问题

1. 页面初始化问题

2. 文字叠加问题

3. 高亮对齐问题

常见问题解答

Q: 插件无法启动？

Q: 正则匹配不工作？

Q: 高亮不显示？

Q: 高亮位置不准确？

Q: 如何编辑文本？

Q: 如何卸载插件？

Q: 支持哪些正则标志？

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

🛠️ 开发指南

构建要求

项目结构

开发命令

调试方法

📊 发布指南

发布前的准备工作

发布检查清单

🤝 贡献指南

提交Issue

提交Pull Request

未来改进方向

📝 更新日志

v1.0.3 (2025-11-21) - 双模式架构 + IME兼容性 🎉

v1.0.2 (2024-11-14)

v1.0.1 (2024-10-28)

v1.0.0 (2024-10-27)

v0.0.1 (初始版本)

技术演进

📚 技术文档

Bug修复报告详情

光标位置Bug修复 (v1.0.1)

问题描述

根本原因分析

修复方案

长文本高亮定位Bug修复

问题背景

根本原因分析

最终解决方案：文本复制高亮技术

焦点管理Bug修复 (v1.0.2)

问题描述

根本原因分析