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個，以下：也能達到效果。

目前此種解決方式雖然比較笨，但能夠實現需求，忘大佬指定一些更高明的方案供學習，謝謝