正则表达式可视化工具regex-vis

在这里插入图片描述

什么是正则表达式 ?

正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。【百度百科】

正则表达式用简短的代码,能实现非常复杂的文本校验、查找、替换、提取操作。

最常见的比如注册时,验证邮箱是否符合要求等等

什么是 regex-vis ?

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

软件功能:

  • 可视化正则表达式
  • 正则表达式的可视化编辑
  • 正则表达式的测试。

regex-vis 功能演示

官方提供了站点:https://regex-vis.com

构建镜像

如果你不想自己构建,可以跳过,直接阅读下一章节

官方没有提供了 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 laosu<wbsu2003@gmail.com>  
COPY --from=build-deps /app/build /usr/share/nginx/html  
  
EXPOSE 80  
CMD ["nginx", "-g", "daemon off;"]

构建镜像和容器运行的基本命令如下👇

# 下载代码
git clone https://github.com/Bowen7/regex-vis.git
  
# 进入目录
cd regex-vis

# 将 Dockerfile 放入当前目录
  
# 构建镜像
docker build -t wbsu2003/regex-vis:v1 .

# 运行容器
docker run -d \
   --name regex-vis \
   -p 3420:80 \
   wbsu2003/regex-vis:v1

安装

在群晖上以 Docker 方式安装。

在注册表中搜索 regex-vis ,选择第三个 wbsu2003/regex-vis,版本选择 latest

在这里插入图片描述

端口

本地端口不冲突就行,不确定的话可以用命令查一下

# 查看端口占用
netstat -tunlp | grep 端口号
本地端口容器端口
342080

在这里插入图片描述

命令行安装

如果你熟悉命令行,可能用 docker cli 更快捷

# 运行容器
docker run -d \
   --restart unless-stopped \
   --name regex-vis \
   -p 3420:80 \
   wbsu2003/regex-vis

也可以用 docker-compose 安装,将下面的内容保存为 docker-compose.yml 文件

version: '3'

services:
  regex:
    image: wbsu2003/regex-vis
    container_name: regex-vis
    restart: unless-stopped
    ports:
      - 3420:80

然后执行下面的命令

# 新建文件夹 regex-vis 
mkdir -p /volume1/docker/regex-vis

# 进入 regex-vis 目录
cd /volume1/docker/regex-vis

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d

运行

在浏览器中输入 http://群晖IP:3420 就能看到主界面

在这里插入图片描述

默认是英文的,可以选择简体中文

在这里插入图片描述

你输入一个正则表达式后,会生成它的可视化图形。

老苏是网上找的校验身份证的正则表达式,只是用于演示软件的功能,不表示其正确或者无缺陷;

在这里插入图片描述

然后你可以在图形中点选或框选单个或多个节点,并在右侧的操作面板上对它们进行操作。

在这里插入图片描述

最后来验证一下,绿色表示数据验证通过

在这里插入图片描述

参考文档

Bowen7/regex-vis: 🎨 Regex visualizer & editor
地址:https://github.com/Bowen7/regex-vis

Regex Vis
地址:https://regex-vis.com/

使用 regex-vis.com 可视化正则表达式
地址:https://www.bowencodes.com/post/regex-vis

正则表达式 – 教程 | 菜鸟教程
地址:https://www.runoob.com/regexp/regexp-tutorial.html

  • 9
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杨浦老苏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值