看不懂正则表达式？试试可视化工具吧！
1. 前言
正则表达式是看不可视一种用来匹配字符串的强有力工具。设计思想是懂正达式用一种描述性的语言来给字符串定义一个规则，凡是则表符合规则的字符串我们就认为它“匹配”了，否则该字符串就是试试不合法的。日常开发中常常会使用正则表达式，化工例如：对数据格式进行校验（ 判断一个字符串是看不可视否是合法的Email格式、合法的懂正达式IP格式或是否按照特定格式的数字和字母拼接）；又或是将日志详情按照某种格式匹配后采集上报。复杂的则表正则表达式可读性很差，对地球人来说掌握比较困难，试试下定决心系统的服务器托管化工学习后又会很快的忘记。在有大模型辅助编程前，看不可视如果要写一个复杂的懂正达式正则表达式可能需要花费不少精力搜索资料和验证，有了大模型帮忙确实可以大大简化书写的则表过程。但不管是试试之前还是现在，可能对正则表达式执行的化工正确性仍不太确定（大模型也可能给出错误的结果或者由于描述不准确导致给出不符合预期的结果），这时候如果能对正则表达式可视化的分析，那么将大大增加使用的信心。
2. 工具推荐
2.1 简介
regex-vis是一个辅助学习、编写和验证正则的工具，输入一个正则表达式后，会生成它的可视化图形。服务器租用然后可以点选或框选图形中的单个或多个节点，再在右侧操作面板对其进行操作，具体操作取决于节点的类型，比如在其右侧插入空节点、为节点编组、为节点增加量词等。项目开源，可以拉取代码到本地编译执行，也可以 直接在 regex-vis.com 体验它的功能。
2.2 原理
通过词法分析和语法分析将一个正则表达式转换为 AST( Abstract Syntax Tree)。其中词法分析将正则字符串转为 Tokens，Tokens 再通过语法分析转为 AST。实现源码参考 Parser。
2.3 举例
下面列举一些常用的正则表达式和对应的可视化图，点击小标题超链接可以直接跳转到RegexVis页面查看。
① 邮箱
只允许英文字母、数字、下划线、英文句号、以及中划线组成。亿华云计算
^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$
② 域名
^((http:\/\/)|(https:\/\/))?([a-zA-Z0-9]([a-zA-Z0-9\-]{ 0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{ 2,6}(\/)
③ IP
((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){ 3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))
④ URL
^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{ 2,256}\.[a-z]{ 2,6}\b([-a-zA-Z0-9@:%_\+.~#()?&//=]*)$
⑤ HTML标签
^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$