JavaScript 函数replace揭秘

在JavaScript中replace函数作为字符串替换函数，这是一个威力强大的字符串操作函数，对于常见字符串操作的推荐用法。这篇随笔就来更加深入的理解它。

       replace函数接受两个参数,第一个参数为字符串或正则表达式，第一个参数同样可以接受一个字符串，还可能是一个函数。

      首先对于第一个参数为字符串的我们不再需要多说"I am a boy".replace("boy","girl"),输出："I am a girl"。在这里想说的是第一个参数为正则的情形。对于正则表达式来说首先会根据是否全局的（全局//g）决定替换行为，如果是全部的则替换全部替换，非全局的只有替换首个匹配的字符串。例如：

"Ha Ha".replace(/\b\w+\b/g, "He")  // He He

 

"Ha Ha".replace(/\b\w+\b/, "He")  //He Ha

1:第二个参数为字符串：

    对于正则replace约定了一个特殊标记符$：

1. $i (i:1-99) : 表示从左到右正则子表达式所匹配的文本。
2. $&:表示与正则表达式匹配的全文本。
3. $`(`:切换技能键)：表示匹配字符串的左边文本。
4. $’(‘:单引号)：表示匹配字符串的右边文本。
5. $$：表示$转移。

下面来几个demo:

"boy & girl".replace(/(\w+)\s*&\s*(\w+)/g,"$2 & $1") //girl & boy

 

"boy".replace(/\w+/g,"$&-$&") // boy-boy

 

"javascript".replace(/script/,"$& != $`") //javascript != java

 

"javascript".replace(/java/,"$&$' is ") // javascript is script

2：第二个参数为函数：

      在ECMAScript3推荐使用函数方式，实现于JavaScript1.2.当replace方法执行的时候每次都会调用该函数，返回值作为替换的新值。

     函数参数的规定：

1. 第一个参数为每次匹配的全文本（$&）。
2. 中间参数为子表达式匹配字符串，个数不限.( $i (i:1-99))
3. 倒数第二个参数为匹配文本字符串的匹配下标位置。
4. 最后一个参数表示字符串本身。

这就是本文所要说replace威力强大的地方，理论的东西都是干货，我们需要示例解决一切空洞的问题：

1：字符串首字母大写：

String.prototype.capitalize = function(){

 

    return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase();

 

    } );

 

};

console.log("i am a boy !".capitalize())

输出：I Am A Boy !

2:对字符串“张三56分， 李四74分， 王五92分， 赵六84分”的分数提取汇总，算出平均分并输出每个人的平均分差距。

var s = "张三56分， 李四74分， 王五92分， 赵六84分";

 

var a = s.match(/\d+/g);

 

var sum = 0;

 

for(var i = 0 ; i < a.length; i++){

 

            sum += parseFloat(a[i]);

 

}

 

  

 

var avg = sum / a.length;

 

  

 

function f(){

 

            var n = parseFloat(arguments[1]);

 

            return n + "分" + "(" + ((n > avg) ? ("超出平均分" + (n - avg)) :

 

                        ("低于平均分" + (avg - n))) + "分)";

 

}

 

  

 

var result = s.replace(/(\d+)分/g, f);

 

console.log(result);

 

输出：

张三56分(低于平均分20.5分)， 李四74分(低于平均分2.5分)， 王五92分(超出平均分15.5分)， 赵六84分(超出平均分7.5分)

以下是个人总结：
为了了解函数 f 作为参数在replace方法中接收的arguments的内容
我在f()方法里面添加了一些代码
function f(){
            for(var i=0;i<arguments.length;i++){
                alert(arguments[i]);
            }
           
            var n = parseFloat(arguments[1]);
 
            return n + "分" + "(" + ((n > avg) ? ("超出平均分" + (n - avg)) :
 
                        ("低于平均分" + (avg - n))) + "分)";
 
}
添加这些代码后，执行结果弹出很多窗口
所以在测试的时候暂时将字符串s改成“张三56分”
执行后，分别出现4次弹窗，内容分别是：
56分，56，2，张三56分
根据代码var result = s.replace(/(\d+)分/g, f);和函数参数的规定：
大致了解了这4个内容：
第一个就是正则表达式/(\d+)分/匹配的字符串
第二个也是/(\d+)/匹配的字符串，如果没有分的话，第一个和第二个的内容是一样的
第三个就是56所在的下标位置也就是2了
第四个就是匹配的字符串本身，也就是：张三56分

然后当字符串为这样的时候："张三56分， 李四74分， 王五92分， 赵六84分"
我的理解就是当正则表达式/(\d+)分/g全局匹配的时候，它总共查到了4组内容
然后再把每一组内容分成4部分传递给f()作为参数，所以我理解为replace方法一共执行了4次循环
每次循环返回的字符串以逗号和下一个返回的字符串连接，最后的结果就是这样了：
张三56分(低于平均分20.5分)， 李四74分(低于平均分2.5分)， 王五92分(超出平均分15.5分)， 赵六84分(超出平均分7.5分)