解读replace的第二个参数为函数

在js中，str.replace(RegExp,function(args){});第二个参数为函数，为了更好的解释，我在这里把函数里的参数暂作为数组args。

首先明确第一点：args的长度并不固定，它的长度是根据你所传递的正则表达式RegExp所定，具体是怎么确定的后面介绍。

第二点：

我们先让args具体化一下。args = [1,...,args.length,length-2,args.length-1];这里面的数值在此代表着数组的下标而不是内容。

虽然args的长度不确定，但有三个位置的值是可以确定的。这三个位置便是1，args.length,length-2,args.length-1。

也就是参数的第一项，和最后两项，这三个位置分别对应：当前匹配的值，匹配项在字符串中的最小位置，原始字符串。

第三点：

既然有三个位置的值可以确定，那么除此三个参数外，中间的参数是什么？

中间的参数对应着正则表达式中子表达式捕获组的值。如果子表达式匹配成功则将捕获组的值放到中间的参数中，如果没有匹配成功，

那么会用undefined来占位。

来看一个例子：

var str = '<li><a <%=src%>></a><li><a <%=src%>></a>';

var reg =  /<%-([\s\S]+?)%>|<%=([\s\S]+?)%>|<%([\s\S]+?)%>|$/g;

str.replace(reg,function(a,b,c,d,e,f){

    console.log(a,b,c,d,e,f);

});

分析：

    函数中的参数应该有几位？

    首先可以确定有三个参数是肯定存在的，然后整个正则表达式有三个子表达式，那么又有三个参数加入进来，之后分析子表达式。每个子表达式各有一个捕获组，所以不需要额外添加参数位置，如果捕获组的个数超出1，则需要添加参数的个数。最后相加3+3为6.参数一共有6位。

    我们只看一次的匹配后输出的结果  ：

 <%=src%> undefined src undefined 7 <li><a <%=src%>></a><li><a <%=src%>></a>

第一个undefined代表第一个子表示没有匹配成功，第三个undefined代表第三个子表示没有匹配成功。