解锁正则表达式的秘密：regex-vis工具带你看见模式匹配的魔法！

什么是正则表达式

正则表达式是一种强大的文本模式匹配工具，用于在文本中查找、匹配和替换特定模式的字符串。它是一种由字符和操作符构成的模式字符串，可以用来描述字符的组合规则。正则表达式通常用于以下情况：

在文本中搜索特定模式的字符串。
在文本中替换特定模式的字符串。
对输入进行验证，以确保其符合特定格式。

什么是 regex-vis ？

regex-vis是一个辅助学习、编写和验证正则的工具。它不仅能对正则进行可视化展示，而且提供可视编辑正则的能力。

简单来说，你输入一个正则表达式后，会生成它的可视化图形。然后可以点选或框选图形中的单个或多个节点，再在右侧操作面板对其进行操作，具体操作取决于节点的类型，比如在其右侧插入空节点、为节点编组、为节点增加量词等。

regex-vis是一款开源的软件，目前在github上已经获得3.1k start，看来很多朋友都很青睐这个项目。

功能特性

可视化正则表达式：将正则表达式转换为直观的图形，帮助我们理解正则表达式的结构和工作原理。
调试正则表达式：可以输入字符串和正则表达式，逐个字符地查看正则表达式如何匹配字符串，方便调试。
学习正则表达式：提供丰富的教程和示例，帮助我们学习正则表达式的基础知识。
支持多种语言：支持英语、中文方便全球用户使用。

安装部署

❝
如果不想自己安装部署的，可以使用项目作者提供的体验网站进行体验
❞

克隆项目到本地

git clone https://github.com/Bowen7/regex-vis.git

进入到项目的根目录，编写Dockerfile文件

FROM node:16.16 as build-deps  
  
# 设置工作目录  
WORKDIR /app
COPY . ./  
  
# 更新根证书  
RUN apt-get update && apt-get install -y ca-certificates  
  
# 设置镜像源为淘宝 NPM 镜像
RUN npm config set registry https://registry.npmmirror.com
  
# 安装依赖
RUN npm i -g pnpm  
RUN pnpm install  
  
# 构建应用  
RUN pnpm run build  
    
FROM nginx:1.21-alpine  
MAINTAINER didiplus<didiplus558@gmail.com>  
COPY --from=build-deps /app/build /usr/share/nginx/html  
  
EXPOSE 80  
CMD ["nginx", "-g", "daemon off;"]

执行下面的命令进行构建

docker build -t regex-vis:v1 .

运行容器

docker run -d \
   --name regex-vis \
   -p 3420:80 \
   regex-vis:v1

使用体验

官方提供了一个体验站点^[1]，可以快速体验。

首页界面，默认是英文的，可以右上角选择中文。

使用很简单，直接输入一个正则表达式后，就会生成可视化图形。比如我这里找了一个手机号码的正则表达式

可以选择在图形中的单个或者多个节点，然后在右侧的面板上进行操作。

最后验证一下，输入数据，绿色表示验证通过，红色表示不通过。

Regex-Vis 的直观可视化界面和交互功能让用户能够更直观地理解正则表达式的工作原理，以及它们如何与文本进行匹配。

如果大家对这个项目感兴趣的可以自行去项目地址^[2]进行查看

Reference

[1]

体验站点: https://regex-vis.com

[2]

项目地址: https://github.com/Bowen7/regex-vis