一個例子掌握正則表達式

問題

將下面字符串中的函數改造爲箭頭函數的形式

"function abc(m, n) { if (m && n) { console.log(m, n) } else { console.log('none') } } }";

答案

先直接上答案

let reg = /(function)([\w ]*)(\([\w ,]*\))/
funcStr = funcStr.replace(reg,"const$2= $3 =>")複製代碼

輸出爲

const abc = (m, n) => { if (m && n) { console.log(m, n) } else { console.log('none') } } }

解釋

關鍵在於，要從字符串中匹配出三部分：function，函數名，(m, n)

而後，將function改成const，函數名不用變，(m, n)改成 = (m, n) =>

這三部分，對應的是三個括號(function)([\w ]*)(\([\w ,]*\))，括號在正則表達式中指的是分組。

分組一，(function)

    匹配function，這個簡單，就是直接的字符匹配；

分組二，([\w ]*)

    匹配函數名,以及空格；

     *表示的是匹配前一個字符 0次或無限次，這裏的前一個字符就是[\w ]；

    []表示的是方括號中字符集的某個字符；

    \w表示的是某個單詞字符

    因此[\w ]*就能夠匹配到函數名以及周圍的空格，這是一種貪婪模式（儘可能多的匹配）；

分組三，(\([\w ,]*\))

    匹配函數的參數、括號、逗號；

    \( 和 \) 匹配的是括號，這裏用到了轉義符號；

   同分組二的分析， [\w ,]* 能夠匹配到空格、逗號、函數的參數；

最後，funcStr.replace(reg,"const$2= $3 =>")，作了什麼呢？

將funcStr中被reg匹配到的字符，替換成"const$2= $3 =>"，而$2和$3表明的就是分組二和分組三匹配到的字符，之因此不沒有$1，是由於function被const替換掉了。

小結

這個例子雖然沒有用到正則表達式的全部知識點，可是真正本身弄懂了怎麼實現的話，足夠掌握正則表達式了。細節的知識點能夠去看看下面的參考。

參考

正則表達式不要背