正则表达式结合自定义function使用replace

replace使用正则表达式和function替换
js代码

html代码

场景描述
输入不同数量的人名，根据不同的人数打印不同的描述

代码分析
首先在js代码中使用templates定义了5个模板，通过 var idx = Math.min(names.length, 4)根据人数获取对应的模板的索引，通过 return templates[idx].replace(/{name}|{others}/g, function(val){ console.log(val) return val === ‘{name}’?names.shift():names.length })替换模板对应的位置，输出结果

首先在对应位置打断点进行调试

分别在9、11、12三个位置打上了断点，运行console.log(likes([‘John’]))时获取的idx为1，即使用模板一，通过正则表达式/{name}|{others}/g去匹配对应的数据，其中|代表或者，代表全局替换

当到达11时打印val

划重点：可见val就是需要匹配的字段

由此说明，当使用正则表达式且replace第二个参数为function时，function的接收的参数就是需要匹配的字段，并且将由function的返回值替换匹配的字段，就可以通过判断val的值进行不同的操作

其中return val === ‘{name}’?names.shift():names.length这段代码的细节之处在于，可以通过names下标去返回需要替换的值，但是这样做的话在替换others时就需要进行减法运算，但是如果使用shift()，就不需要进行减法操作了，names.shift() 正则顺序是吻合的，直接完美契合！因为shift()的功能是删除并返回数组的第一个元素。

下图为运行到console.log(likes([‘John’, ‘Jane’, ‘Andrew’, ‘Jennifer’]))时的数据，由于shift()已经将前两个数据弹出数组，所以数组的长度完全符合，直接获取就可以了

总结
replace()方法结合正则表达式，通过自定义的回调函数,可以实现各种复杂的字符串处理需求。