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

目录

    • 背景
    • [🚀 功能亮点](#🚀 功能亮点)
      • [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基础学习专栏
相关推荐
我命由我1234513 小时前
CSS 锚点定位 - 锚点定位引入(anchor-name、position-anchor)
开发语言·前端·javascript·css·学习·html·学习方法
高斯的手稿080114 小时前
Django里面,多个APP的url设置,每个APP单独对应HTML设置
数据库·django·html
一晌小贪欢16 小时前
【圣诞快乐 Merry Christmas】 3D 粒子变形圣诞体验
3d·html·h5·html5·圣诞网页·粒子虚幻·虚幻粒子页面
dy171716 小时前
vue左右栏布局可拖拽
前端·css·html
咬人喵喵17 小时前
告别无脑 <div>:HTML 语义化标签入门
前端·css·编辑器·html·svg
mofei1213819 小时前
正则表达式高级用法指南
python·正则表达式·零宽断言·原子分组
OranTech20 小时前
练习02-HTML语法
html
世界唯一最大变量21 小时前
一种全新的,自创的(2d无人开车)的算法
html
0思必得021 小时前
[Web自动化] CSS布局与定位
前端·css·自动化·html·web自动化
天外天-亮1 天前
v-if、v-show、display: none、visibility: hidden区别
前端·javascript·html