一个例子掌握正则表达式

问题

将下面字符串中的函数改造为箭头函数的形式

"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替换掉了。

小结

这个例子虽然没有用到正则表达式的全部知识点，可是真正本身弄懂了怎么实现的话，足够掌握正则表达式了。细节的知识点能够去看看下面的参考。

参考

正则表达式不要背