【静态功能网站】正则表达式助手工具

目录

    • 背景
    • [🚀 功能亮点](#🚀 功能亮点)
      • [1. 智能生成与参考](#1. 智能生成与参考)
      • [2. 实时可视化测试](#2. 实时可视化测试)
      • [3. 常用正则一键试用](#3. 常用正则一键试用)
      • [4. 结果导出 (Copy & CSV)](#4. 结果导出 (Copy & CSV))
    • [🛠️ 技术实现](#🛠️ 技术实现)
    • [📝 总结](#📝 总结)

专栏导读

🌸 欢迎来到Python办公自动化专栏---Python处理办公问题,解放您的双手
🏳️‍🌈 个人博客主页:请点击------> 个人的博客主页 求收藏
🏳️‍🌈 Github主页:请点击------> Github主页 求Star⭐
🏳️‍🌈 知乎主页:请点击------> 知乎主页 求关注
🏳️‍🌈 CSDN博客主页:请点击------> CSDN的博客主页 求关注
👍 该系列文章专栏:请点击------>Python办公自动化专栏 求订阅
🕷 此外还有爬虫专栏:请点击------>Python爬虫基础专栏 求订阅
📕 此外还有python基础专栏:请点击------>Python基础学习专栏 求订阅
文章作者技术和水平有限,如果文中出现错误,希望大家能指正🙏
❤️ 欢迎各位佬关注! ❤️

背景

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

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

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

🚀 功能亮点

1. 智能生成与参考

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

在这个工具中,你只需要:

  1. 输入完整文本(例如:"大家好今天我花了124.5元")。
  2. 输入你想提取的内容(例如:"124.5")。
  3. 点击生成

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

  • 如果提取的是数值 (整数或小数),它会生成 \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 库,保持轻量。

关键代码片段

智能数值识别逻辑:

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

CSV 导出逻辑(解决中文乱码):

javascript 复制代码
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!

结尾

希望对初学者有帮助;致力于办公自动化的小小程序员一枚
希望能得到大家的【❤️一个免费关注❤️】感谢!
求个 🤞 关注 🤞 +❤️ 喜欢 ❤️ +👍 收藏 👍
此外还有办公自动化专栏,欢迎大家订阅:Python办公自动化专栏
此外还有爬虫专栏,欢迎大家订阅:Python爬虫基础专栏
此外还有Python基础专栏,欢迎大家订阅:Python基础学习专栏
相关推荐
超级大福宝35 分钟前
在正则表达式中匹配汉字
正则表达式
小扎仙森8 小时前
html引导页
前端·html
软件技术NINI10 小时前
html css js网页制作成品——陈都灵html+css 5页附源码
javascript·css·html
bing_feilong11 小时前
html都支持哪些颜色
html
脾气有点小暴11 小时前
详解 HTML Image 的 mode 属性:图像显示模式的灵活控制
前端·html·uniapp
秋邱12 小时前
AR + 离线 AI 实战:YOLOv9+TensorFlow Lite 实现移动端垃圾分类识别
开发语言·前端·数据库·人工智能·python·html
是你的小橘呀14 小时前
从 "渣男" 到 "深情男":Promise 如何让 JS 变得代码变得专一又靠谱
前端·javascript·html
杨超越luckly14 小时前
HTML应用指南:利用POST请求获取全国极氪门店位置信息
python·arcgis·html·数据可视化·门店数据
灵犀坠14 小时前
前端面试&项目实战核心知识点总结(Vue3+Pinia+UniApp+Axios)
前端·javascript·css·面试·职场和发展·uni-app·html