正则表达式助手 - 一晌小贪欢

背景

在日常开发和数据处理中，正则表达式（Regex）是一个让人又爱又恨的工具。它功能强大，能高效地进行文本搜索和提取，但其语法晦涩难懂，尤其是对于不常写正则的开发者来说，写出一个准确的正则往往需要反复查阅文档和调试。

为了解决这个问题，我开发了一个纯前端的正则表达式助手，它不仅能帮你测试正则，还能根据你的输入“智能生成”参考正则，并支持将匹配结果一键导出。

点击可进行线上使用
点击可进行线上使用
点击可进行线上使用

🚀 功能亮点

1. 智能生成与参考

这是本工具最核心的痛点解决方案。很多时候我们手里有一段文本，想提取其中的特定内容（比如金额、邮箱、日期），但不知道正则怎么写。

在这个工具中，你只需要：

输入完整文本（例如：“大家好今天我花了124.5元”）。
输入你想提取的内容（例如：“124.5”）。
点击生成。

系统会自动分析你的意图：

如果提取的是数值（整数或小数），它会生成 \d+(\.\d+)?。
如果提取的是邮箱，它会生成 [\w.-]+@[\w.-]+\.[a-zA-Z]{2,6}。
如果无法识别通用模式，它会生成一个精确匹配的正则（并自动转义特殊字符）。

2. 实时可视化测试

不再需要盲写代码。在测试区，输入正则表达式和测试文本，匹配结果会实时高亮显示。这不仅能验证正则是否正确，还能直观地看到是否匹配到了多余的内容。

3. 常用正则一键试用

工具内置了一个常用正则库，涵盖了：

Email 邮箱
手机号码（中国）
URL 网址
日期 (YYYY-MM-DD)
身份证号 (18位)
数值 (整数/小数)
中文字符
IPv4 地址

点击对应的“试用”按钮，正则会自动填充到测试区，方便快速验证。

4. 结果导出 (Copy & CSV)

当你用正则提取出一堆数据后，下一步通常是把它们存起来。本工具贴心地提供了：

复制结果：一键将所有匹配项复制到剪贴板（按行分隔）。
导出 CSV：将匹配结果导出为 .csv 文件，支持 Excel 直接打开（已处理中文乱码问题），方便进行后续的数据分析。

🛠️ 技术实现

这是一个纯静态的 Web 项目，不需要任何后端服务，部署极其简单（甚至直接用浏览器打开 HTML 文件就能用）。

核心逻辑：原生 JavaScript。利用 RegExp 对象进行匹配，通过字符串操作和 DOM 操纵实现高亮和交互。
UI 框架：Bootstrap 5.3。保证了简洁现代的界面风格和响应式布局。
无依赖：除了 Bootstrap 的 CSS 外，没有引入任何复杂的 JS 库，保持轻量。

关键代码片段

智能数值识别逻辑：

if (/^\d+(\.\d+)?$/.test(target)) {
    resultPattern = '\\d+(\\.\\d+)?';
    explanation = '检测到数值（整数或小数）。';
}

CSV 导出逻辑（解决中文乱码）：

let csvContent = "data:text/csv;charset=utf-8,\uFEFF"; // 添加 BOM 头
csvContent += "匹配结果\n";
matches.forEach(function(row) {
    // 处理 CSV 转义
    let cell = row.replace(/"/g, '""'); 
    if (cell.search(/("|,|\n)/g) >= 0) {
        cell = `"${cell}"`;
    }
    csvContent += cell + "\n";
});
// ... 下载逻辑

📝 总结

这个小工具虽然简单，但覆盖了正则表达式使用的完整闭环：生成 -> 测试 -> 提取 -> 导出。希望它能成为你工具箱里提升效率的小帮手！

如果你对这个项目感兴趣，可以直接下载源码并在本地运行。Happy Regexing!

背景