尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

正则在网页上测,数据却传给了服务器?我做了第 5 个单文件工具:正则测试器,实时高亮 + 捕获组一目了然

正则在网页上测,数据却传给了服务器?我做了第 5 个单文件工具:正则测试器,实时高亮 + 捕获组一目了然 写正则太痛苦我做了个单文件正则测试器实时高亮匹配 捕获组一目了然在线即用上周分享的「4 个前端小工具」收到了不少反馈今天趁热更新第 5 个 ——正则表达式测试器。做它的原因很直接写正则的痛谁写谁知道。引用网络上的在线正则工具吧担心数据上传泄露隐私装插件又太重。而且大部分工具只告诉你「匹配了没」不告诉你「为什么没匹配」—— 捕获组、位置、命名组全靠脑补。所以这个工具依然坚持我的「单文件哲学」一个 HTML 文件、零依赖、零外部请求、所有处理都在本地双击就能用也部署了在线版。✨ 功能一览实时匹配高亮输入正则和文本匹配结果立即高亮多个匹配自动循环换色一目了然完整捕获组展示每个匹配都列出普通组、命名组(?name...)和起始位置写复杂正则再也不怕数错括号6 个正则修饰符g / i / m / s / u / y 随意组合开关常用正则一键套用内置邮箱、手机号、URL、IPv4、中文、身份证、日期、时间、连续重复词、空白行 10 个高频预设错误即时提示非法正则如漏了括号当场报错不用等浏览器控制台本地保存正则、修饰符、测试文本自动存浏览器本地关页面再开还在复制高亮结果一键复制「去色版」匹配结果方便直接粘进文档 用一个小例子感受一下比如校验邮箱传统写法容易在括号上翻车。工具内置了邮箱预设[a-zA-Z0-9._%-][a-zA-Z0-9.-]\.[a-zA-Z]{2,}粘贴进工具输入几行测试文本匹配到的邮箱会立刻高亮每个邮箱的「匹配内容、位置、捕获组」在下方表格里排得明明白白 —— 到底匹配到了谁、为什么匹配到再也不靠猜。再看一个进阶场景提取形如hellosite.com的邮箱、并单独拿到用户名和域名用命名组(?user\w)(?domain[\w.])匹配后表格会直接显示user: hello、domain: site.com一眼看懂捕获结果。 在线体验与开源 在线体验打开即用https://sunfloweandnefertari.github.io/regex-tester/ 开源仓库MIT随便改https://github.com/Sunfloweandnefertari/regex-tester 也支持本机离线仓库里下载index.html双击用浏览器打开工具特性依旧继承系列优势单文件零依赖、数据不出本地、离线可用、MIT 开源。 求支持这是「前端小工具」系列的第 5 个系列还有JSON 格式化/对比、时间戳转换、Markdown 预览、颜色工坊上一个合集文章里的四个均在线可用玻璃拟态天气台、CRT 复古终端、生成艺术画板、霓虹打砖块等趣味 demohttps://github.com/Sunfloweandnefertari/front-end-template如果你觉得有用欢迎去 GitHub 点个⭐ Star转发给同样被正则折磨的同事️ 下一期做什么你来定不局限于工具Skill / Agent / 教程 / 任何想法都可以。在评论区按这个格式提名会全部收录【类型】名字 —— 一句话理由示例【工具】图片压缩纯前端不传服务器示例【Skill】让 Claude Code 自动写 JSON 校验 skill示例【Agent】自动整理下载文件夹的小助手示例【教程】手写一个 Markdown 解析器原理拆解规则很简单下篇文章公布「提名榜」得票最高的一个我下一期就做它。想写长提案的朋友也可以在 GitHub Discussion 投票帖里提名 https://github.com/Sunfloweandnefertari/regex-tester/discussions
返回列表