js中字符串型正则转化为真正的正则（坑真的大）

背景：最近在作对单表进行增删改查的动态表单，经过后端返回的JSON数据动态渲染，因为项目的技术栈是vue，我就选用了比较好用的动态表单生成器form-create(http://www.form-create.com/)，最多见的有elementui和iview等版本。

具体要点，经过后端返回配置的正则对表单进行校验。如：后端返回了以下JSON，前端生成一个拥有手机号校验正则的文本框。

{
       type:"input",
       title:"手机号",
       field:"telephone",
       value:"",
       props: {
           "type": "text",
           "placeholder": "请输入手机号",
           "pattern":"/^1[3456789]\d{9}$/"
       }
}

可是，form-create pattern字段中，所需格式是一个正则表达式，前端的正则表达式是一个object。后台返回来的是string。

根据下图实验可知，字符串类型的正则不能直接用于校验，则须要想办法转成真正的正则。

想法① 把左右两边的引号去掉不就行了吗？答：❌

去掉两边引号仍是个string啊。想法太片面了，pass

 

想法②，有没有什么方法能够转换？答：✅

经查阅许久，发现eval()这个方法能够将字符串正则修改成真正的正则，以下改造：

{
       type:"input",
       title:"手机号",
       field:"telephone",
       value:"",
       props: {
           "type": "text",
           "placeholder": "请输入手机号",
           "pattern":eval("/^1[3456789]\d{9}$/")
       }
}

可是事情并无这么顺利，修改完发现此手机号表单验证 输入正确的手机号 仍是通不过验证，我就蒙蔽了，都什么鬼。后台正则是字符串，因此经过json返回也是个字符串，无可厚非，应该不会让后台去改。得本身想办法，因此做以下实验：

由上图可知经过eval函数转换好像有问题。经对比，经过eval转换的字符串正则少了一个 \，这是什么鬼？瞬间崩溃。

 

经思量尝试许久，终于找到了解决方案：

①eval函数会将某些字符进行转义，一个 \就会删除掉，试着连续配了两个\\，有下面测试可得，多配置一个\就达到咱们想要的效果了。

②或者在后台去掉首尾的/符号，\连续配置2个，以下：也能达到效果。

目前此种解决方式虽然比较笨，但能够实现需求，忘大佬指定一些更高明的方案供学习，谢谢