Skip to content
快看这页儿写了啥...

功能构思

终于到了写正经项目代码了,那之前也说过,第一个小功能我们写正则校验工具,因为平常写正则老是找在线的校验工具测试,所以就想着自己写一个,以后每次写的正则都补充到在线工具里,慢慢的积攒的多了,也能少写一点点(其实还是因为懒)。

写之前我们先来说一说大概的一个构思。由于我目前暂时算是写完了,所以可以先给大家放一个写完的图看下功能,稍候给大家介绍,如下:

https://qiniu.isboyjc.com/picgo/202211272304137.png

大概就是上面这么个样子,其实也没什么特别复杂的地方。

一共也就 5 排内容,我们一排一排介绍。

先说第一排内容吧,第一排最左边那个图标是是否开启预设匹配,因为我们要在内部预设一些正则,开启预设匹配之后,在正则输入框输入对应正则中文名就可以模糊匹配我们预设的正则,这个是懒癌患者必备。

中间输入框就是正则输入框,可以输入正则字符串,当然开启了自动匹配预设之后也可以输入中文匹配预设。

输入框右边漏斗图标是修饰符筛选项,就是选择正则匹配的一些修饰符(g、i、m、s)。

再往右小眼睛图标是可视化预览,开启之后我们输入正则就会自动渲染图中第二排那个图形化正则匹配步骤,只有可视化正则步骤开启并且正则表达式无误才会有第一排最右边倒数第二个即图片下载按钮,用来下载正则可视化 png 图。

最右边按钮则是复制正则对象按钮。

第三排输入框是待匹配字符串,输入一些字符串用来做正则匹配检测的。

第四排就是展示匹配到的字符串,匹配到多个用不同的颜色去展示。

第五排就是统计一共匹配到了那些字符串。

功能大概就是这样。

不正经的前端