推荐三款正则可视化工具「JS篇」（正则在线调试）
myzbx 2025-05-09 20:34 36 浏览
作者：代码先森
转发链接：
https://mp.weixin.qq.com/s/rw29yKBwti5sIsx2GKG9pw
前言
最近老王对可视化非常着迷。
例如，算法可视化、正则可视化、Vue 数据劫持可视化......
程序的运行过程是看不见摸不着的，如果能够全部实现可视化，那么理解难度将会大幅度减小。
三款 JS 正则可视化工具
- https://jex.im/regulex
- https://regexper.com (网络需自由)
- https://aoxiaoqiang.github.io/reg （替代工具）
- https://www.debuggex.com
常见正则表达式
以下图片由https://jex.im/regulex生成
邮箱
只允许英文字母、数字、下划线、英文句号、以及中划线组成
^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$电话
手机号码
13012345678 手机号码
^1(3|4|5|6|7|8|9)\d{9}$固定电话
XXX-XXXXXXX XXXX-XXXXXXXX 固定电话
(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}域名
https://google.com/
^((http:\/\/)|(https:\/\/))?([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}(\/)IP
127.0.0.1
((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))帐号校验
laowang_001 字母开头，允许 5 - 16 字节，允许字母数字下划线
^[a-zA-Z][a-zA-Z0-9_]{4,15}$字符校验
汉字
前端老王
^[\u4e00-\u9fa5]{0,}$英文和数字
^[A-Za-z0-9]+$长度为 3 - 20 的所有字符
^.{3,20}$英文字符
由 26 个英文字母组成的字符串
^[A-Za-z]+$由 26 个大写英文字母组成的字符串
^[A-Z]+$由 26 个小写英文字母组成的字符串
^[a-z]+$由数字和 26 个英文字母组成的字符串
^[A-Za-z0-9]+$由数字、26 个英文字母或者下划线组成的字符串
^\w+$中文、英文、数字包括下划线
^[\u4E00-\u9FA5A-Za-z0-9_]+$中文、英文、数字但不包括下划线等符号
^[\u4E00-\u9FA5A-Za-z0-9]+$禁止输入含有%&',;=?#34;等字符
[^%&',;=?$\x22]+禁止输入含有~的字符
[^~\x22]+数字正则
整数
^-?[1-9]\d*$正整数
^[1-9]\d*$负整数
^-[1-9]\d*$非负整数
^[1-9]\d*|0$非正整数
^-[1-9]\d*|0$浮点数
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$正浮点数
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$负浮点数
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$非负浮点数
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$非正负点数
^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$推荐JavaScript经典实例学习资料文章
《一个轻量级 JavaScript 全文搜索库，轻松实现站内离线搜索》
《细品269个JavaScript小函数，让你少加班熬夜（一）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（二）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（三）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（四）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（五）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（六）「值得收藏」》
《手把手教你7个有趣的JavaScript 项目-上「附源码」》
《手把手教你7个有趣的JavaScript 项目-下「附源码」》
《JavaScript 使用 mediaDevices API 访问摄像头自拍》
《一文彻底搞懂JavaScript 中Object.freeze与Object.seal的用法》
《可视化的 JS：动态图演示 - 事件循环 Event Loop的过程》
《可视化的 js：动态图演示 Promises & Async/Await 的过程》
《Pug 3.0.0正式发布，不再支持 Node.js 6/8》
《通过发布/订阅的设计模式搞懂 Node.js 核心模块 Events》
《「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能》
《JavaScript 已进入第三个时代，未来将何去何从？》
《前端上传前预览文件 image、text、json、video、audio「实践」》
《深入细品 EventLoop 和浏览器渲染、帧动画、空闲回调的关系》
《推荐13个有用的JavaScript数组技巧「值得收藏」》
《36个工作中常用的JavaScript函数片段「值得收藏」》
《一文了解文件上传全过程（1.8w字深度解析）「前端进阶必备」》
《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》
《JavaScript正则深入以及10个非常有意思的正则实战》
《前端开发规范：命名规范、html规范、css规范、js规范》
《100个原生JavaScript代码片段知识点详细汇总【实践】》
《手把手教你深入巩固JavaScript知识体系【思维导图】》
《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》
《身份证号码的正则表达式及验证详解(JavaScript，Regex)》
《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》
《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《面试中教你绕过关于 JavaScript 作用域的 5 个坑》
作者：代码先森
转发链接：
https://mp.weixin.qq.com/s/rw29yKBwti5sIsx2GKG9pw
相关推荐
- vue3和web网页直接操作微信小程序云开发数据库
-
我们开发好小程序以后，有时候需要编写一个管理后台网页对数据库进行管理，之前我们只能借助云开发自带的cms网页，但是cms网页设计的比较丑，工作量和代码量也不够，所以我们今天就来带大家实现用vue3编写...
- WebCurl:极致轻量的跨平台 HTTP 请求调试工具
-
在接口开发与测试领域，工具的轻量化、兼容性与安全性往往直接影响工作效率。WebCurl作为一款纯原生、无依赖的网页版API测试与调试工具，凭借极简架构与全场景适配能力，重新定义了接口调试工具的使...
- webapi 全流程_webapi项目
-
C#中的WebAPIMinimalApi没有控制器，普通api有控制器，MinimalApi是直达型，精简了很多中间代码，广泛适用于微服务架构MinimalApi一切都在组控制台应用程序类【Progr...
- Nodejs之MEAN栈开发(四)-- form验证及图片上传
-
这一节增加推荐图书的提交和删除功能，来学习node的form提交以及node的图片上传功能。开始之前需要源码同学可以先在git上fork：https://github.com/stoneniqiu/R...
- CodeSpirit.Amis.AiForm 智能表单使用指南
-
概述AiForm是CodeSpirit.Amis框架的智能表单功能，专为AI驱动的长时间处理任务设计。它自动生成一个多步骤的用户界面，包含表单输入、进度监控、日志显示和结果展示等功能。功能特点...
- 初级、中级、高级前端工程师，对于form表单实现的区别
-
在React项目中使用AntDesign（Antd）的Form组件能快速构建标准化表单，特别适合中后台系统开发。以下是结合Antd的最佳实践和分层实现方案：一、基础用法：快速搭...
- Bun v0.7 大版本发布，与 Vite 牵手来破局?
-
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。今天给大家带来...
- 「前端」界面可视化开发框架formio.js
-
简介formio是一个前端可视化开发框架，无需写css/js就可以开发一套前端界面。直接在界面内拖拽就可以完成界面的布局及开发。数据交互也是固定的，表单校验也可以配置，功能非常强大。特性使用ES6...
- 小伙给同事爬取数据竟获取不到，竟要使用这种请求方式才能获取?
-
Http请求中FormData和RequestPayload两种参数的区别?AjaxPost请求中常用的两种的形式：formdata和requestpayload一、默认的表单方式...
- WinForm + Win32 API 自定义无边框窗口实战(工业软件必备)
-
前言随着.NET9.0AOT（Ahead-of-Time）的发布，便萌生了用代码测试AOT编译效果的想法，同时评估未来是否为NanUI开发支持AOT编译的新版本。关于NanUI项目，若大家尚未了...
- DeepSeek从入门到精通(11)——网页版、APP、API使用方式比较
-
DeepSeek提供了三种主要的使用方法：网页版、手机APP和API调用。这三种方式各有特点，适用于不同的使用场景。下面从使用方法和主要特点两方面进行比较：一、网页版使用方法：直接通过浏览器访问De...
- 初略Web API Notification 桌面通知
-
HTML5WebNotificationsAPI通知接口用于向用户配置和显示桌面通知弹窗。例如，Email邮件通知、来电提醒、聊天信息提醒或任务提醒等。关于Web开发技术中Notificat...
- 什么是API网关?——驱动数字化转型的“隐形冠军”
-
什么是API网关API网关（APIGateway）是一个服务器，位于应用程序和后端服务之间，提供了一种集中式的方式来管理API的访问。它是系统的入口点，负责接收并处理来自客户端的请求，然后将请求路由...
- .NET 7使用 Entity Framework Core 制作增删改查(CRUD) Web API 教程
-
在本文中，我们将使用EntityFrameworkCore(EFCore)实现一个.NET7WebAPICRUD示例。WebAPI是一个构建HTTP服务的框架，可以从浏览器、移动设备和...
- C# ASP.NET Core Web Api 与 MVC 模式下 body 参数传递，post 参数方式
-
在ASP.NETCore中，WebAPI和MVC模式在处理HTTP请求时，特别是POST请求，使用body参数来传递数据的方式非常相似。两者都使用模型绑定来自动将请求体中的数据映射到C#对象上。下...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)