不自重者,取辱。不自长者,取祸。不自满者,受益。不自足者,博闻。
Javascript String.replace(regex,function(args){}) 进入全屏
line

上周在FeHelper中增加“正则表达式及时测试”工具,其中我要实现的一个功能,就是将匹配到内容在原Textarea输入框中进行高亮显示,这样能让使用者很直观的看到当前正则表达式在输入内容中匹配到的结果。比如,要从一段简单的代码中找出“options”关键字,但跟在它后面的字符不能是“.”:

结果的匹配其实都挺容易,问题的关键是“如何从输入内容中找到匹配结果的位置”,这个时候就需要用到字符串的replace方法了!

首先,Javascript中String对象的 replace(regex,replacement) 这种形式就不多说了,跟其他语言都一样,比如替换“abcabcabc”字符串中的“bc”为“oe”,可以这样:

"abcabcabc".replace(/bc/g,"oe"); // 输出结果则是:aoeaoeaoe

这里要重点说的,是String对象的 replace(regex,function(args){}) 这种形式!我们需要搞清楚args到底是一个什么样的参数列表!假设我们的测试case是这样的:

var replaceTime = 0;
string.replace(regex,function(){
    console.log("============第" + ++replaceTime + "次匹配替换============");
    for(var i = 0,argLength = arguments.length;i < argLength;i++) {
        console.log("第" + (i + 1) + "个参数内容 = " + arguments[i]);
    }
});


1、假设regex=/bc/g,string="abcabcabc";用测试case得到的结果是这样的:

所以,基本上可以得到一个初步的结论:第一个参数是通过regex匹配出来的结果,第二个参数是匹配结果在string中的索引位置,第三个参数是string字符串本身。于是,我们可以把测试case改成这样来验证一下:

var replaceTime = 0;
string.replace(regex,function(result,index,orignalString) {
    console.log("=============第" + ++replaceTime + "次匹配替换============");
    console.log("第1个参数内容 = " + result);
    console.log("第2个参数内容 = " + index);
    console.log("第3个参数内容 = " + orignalString);
});

确实,验证的结果完全正确。


2、假设regex=/b(c)/g,string="abcabcabc";用测试case得到的结果是这样的:

同样的,也能得出这样一个结论:第一个参数是通过regex这个完整的正则匹配出来的结果,第二个参数是regex中分组“(c)”所产生的结果,第三个参数是匹配结果在string中的索引位置,第四个参数是string字符串本身。


3、假设regex=/(b)(c)g/,string="abcabcabc";用测试case得到的结果是这样的:

同样的,也能得出结论:第一个参数是通过regex这个完整的正则匹配出来的结果,第二个参数是regex中分组“(b)”所产生的结果,第三个参数是regex中分组“(c)”所产生的结果,第四个参数是匹配结果在string中的索引位置,第四个参数是string字符串本身。


同理,通过不断的更改regex和string,利用测试case得到的结论都是一致的。所以可以搞清楚Javascript中,String对象的 replace(regex,function(){}) 方法中,参数列表的意义是这样的:


  • 第一个参数在regex这个完整的正则匹配出来的结果

  • 倒数第二个参数是第一个参数(匹配结果)在输入字符串中的索引位置

  • 最后一个参数是输入字符串本身

  • 如果regex中存在分组,那么参数列表的长度N>3一定成立,且第2到N-2个参数,分别为regex中分组所产生的匹配结果


当然,我们也可以从MDN-Javascript-String板块找到一样的参考:

真正开发中,我们关心的一般都是第一个(通过 arguments[0] 获得)和倒数第二个(通过 arguments[arguments.length - 2] 获得)。有时候能把一些基础的东西琢磨透,更能在开发中提高效率!

趣店(原趣分期)技术学院
重点关注技术架构、服务化、优秀工具、自动化平台、开发全流程一体化解决方案、新人培养、工程师进阶之道等方面
这里环境优雅、氛围年轻、主要是福利还多,还等什么?我们敞开技术的大门,欢迎各种工程师加入!

评论区域

line