将输入的字符串按输入的正则表达式匹配并返回结果（仿正则表达式测试）

将输入的字符串按输入的正则表达式匹配并返回结果&＃xff08;仿正则表达式测试&＃xff09;

一、需求

• 最近做了一个很有意思的需求&＃xff0c;基本功能和正则表达式的网页测试功能很相似&＃xff0c;如&＃xff1a;正则表达式在线测试 &＃xff0c;单独拿出来记录一下&＃xff0c;为以后开发中遇到类似需求提供一些思路

• 需求1&＃xff1a;用户可以输入一段正则表达式字符串和一段用于测试正则表达式匹配的字符串&＃xff0c;这则表达式可以提供几个快捷修饰符&＃xff0c;如&＃xff1a;i、g、m、s&＃xff0c;用户输入正则表达式后可以选择修饰符

• 需求2&＃xff1a;根据输入的正则表达式字符串和选择的修饰符来生成一个完整的正则去匹配测试字符串并返回结果

• 大致效果如下所示&＃xff1a;
  

二、解决

• 项目是Vue3.x&＃43;Element Plus&＃xff0c;需求1的部分很简单&＃xff0c;利用ui组件库提供的el-input组件和el-checkbox组件就能实现&＃xff0c;这里需要注意的是复选框选中状态和未选中状态下的值&＃xff0c;这里处理如下&＃xff0c;部分非重要代码省略&＃xff1a;

...

<el-inputtype&＃61;"textarea"v-model&＃61;"regStr"placeholder&＃61;&＃39;请先输入正则表达式&＃39;/>
...

<el-inputtype&＃61;"textarea"v-model&＃61;"form.regTest"placeholder&＃61;&＃39;请先输入要测试的内容&＃xff0c;然后点击"测试匹配"按钮&＃39;/>
...

<el-button &＃64;click&＃61;"RegStrTest">el-button>
...

<div class&＃61;"regexp-check-box"><el-checkboxv-model&＃61;"reg.i"label&＃61;"-i 忽略大小写"true-label&＃61;&＃39;i&＃39;/><el-checkboxv-model&＃61;"reg.m"label&＃61;"-m 多行模式"true-label&＃61;"m"/><el-checkboxv-model&＃61;"reg.s"label&＃61;"-s 包含换行符"true-label&＃61;"s"/><el-checkboxv-model&＃61;"reg.g"label&＃61;"-g 全局匹配"true-label&＃61;"g"/>
div>
...
<script setup>import { ref, reactive } from "vue"// 正则表达式修饰符复选框const reg &＃61; reactive({i: &＃39;i&＃39;,m: &＃39;m&＃39;,s: &＃39;s&＃39;,g: &＃39;g&＃39;})// 正则表达式字符串const regStr &＃61; ref(&＃39;&＃39;)// 正则表达式测试字符串const regTestStr &＃61; ref(&＃39;&＃39;)// 返回的匹配结果const result &＃61; ref(&＃39;&＃39;)// 返回的匹配位置const matchLocation &＃61; ref(&＃39;&＃39;)
script>
...


• 接下来开始实现功能模块&＃xff0c;因为这里输入的正则表达式的类型是字符串&＃xff0c;所以需要将字符串进行一次类型转换&＃xff0c;转为正则表达式&＃xff0c;这里要用到两种字符串转为正则的方法分别是new RegExp()和eval()&＃xff0c;复选框由于只通过true-label属性定义了选中状态下的值&＃xff0c;未选中状态下的值为undefined&＃xff0c;结合上述代码&＃xff0c;实现正则表达式匹配功能代码如下&＃xff1a;

<script setup>.../* 正则表达式匹配测试 */const RegStrTest &＃61; () &＃61;> {if (regStr.value && regTestStr.value) {// 由于是直接输入正则表达式“/”和“/”内的内容&＃xff0c;所以需要先补齐“/”、“/”符号&＃xff0c;这里可以利用实例函数将输入的正则表达式字符串类型转为正则&＃xff0c;储存到一个临时变量中&＃xff0c;转换时会自动补齐“/”和“/”如注释代码&＃xff0c;当然也可以使用字符串拼接的方式// let temp &＃61; new RegExp(regStr.value)let temp &＃61; &＃39;/&＃39; &＃43; regStr.value &＃43; &＃39;/&＃39;// 之后判断是否勾选了修饰符并和临时变量进行拼接&＃xff0c;这里使用&＃43;符号拼接会使正则再次转为字符串&＃xff08;如果上述是使用实例函数补齐“/”、“/”的话&＃xff09;for (let key in reg) {if (reg[key]) {temp &＃43;&＃61; reg[key]}}// 接下来利用eval()函数&＃xff0c;将拼接过的正则字符串转为真正的正则表达式let regx &＃61; eval(temp)// 利用replace()函数实现字符串的正则匹配regTestStr.value.replace(regx, function (match){// 返回结果用空格拼接result.value &＃43;&＃61; match &＃43; &＃39; &＃39;// 匹配位置matchLocation.value &＃61; regTestStr.value.indexOf(match)})}}...
script>


• 最后找了一个实例测试了一下&＃xff0c;效果如下&＃xff1a;
  

• 具体的Javascript中的replace()方法可以看MDN中的String.prototype.replace()

到这里就完成了&＃xff0c;希望能帮到你&＃x1f308;