js replace各种用法

作者：zccst

正则表达式是常学常新的知识点，一点点积累吧，今天重点看replace，以前印象中应该：

str.replace(old,new);

即从从原字符串中找到old，然后用new来替换。

今天发现，第二个参数还可以是一个函数，而且该函数还有两个参数。

例如，jQuery中$.camelCase的实现细节。

var ret = $.camelCase(str);

jQuery源码：

// Convert dashed to camelCase; used by the css and data modules

// Microsoft forgot to hump their vendor prefix (#9572)

camelCase: function( string ) {

    return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );

}

解析过程：

// Matches dashed string for camelizing

var    rmsPrefix = /^-ms-/,

    rdashAlpha = /-([\da-z])/gi,

    // Used by jQuery.camelCase as callback to replace()

    fcamelCase = function( all, letter ) {

        console.log(arguments);

        return letter.toUpperCase();

    },

string = "margin-top";

var a = string.replace( rdashAlpha, fcamelCase );

console.log(a);

注意到fcaemlCase是一个函数，而且有两个参数，实际中只使用第二个参数。

这两个参数分别是什么意思呢？

通过 rdashAlpha = /-([\da-z])/gi
 可以知道，要从原字符串中寻找-x，并使用fcamelCase函数替换。

所以fcamelCase()函数的两个参数分辨是配平字符串，匹配结果。

打印arguments：

["-t", "t",
6, "margin-top"]

参考资料：

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

函数参数的规定：
第一个参数为每次匹配的全文本（$&）。
中间参数为子表达式匹配字符串，个数不限.( $i
(i:1-99))
倒数第二个参数为匹配文本字符串的匹配下标位置。
最后一个参数表示字符串本身。
这就是本文所要说replace威力强大的地方，理论的东西都是干货，我们需要示例解决一切空洞的问题：

例1：字符串首字母大写：

String.prototype.capitalize = function(){

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

        console.log(arguments);

        return p1+p2.toUpperCase()

    ;} );

};

打印arguments：

["i", "",
"i", 0,
"i am a boy
!"]

["
a", " ", "a",
1, "i
am a boy !"]

["
a", " ", "a",
4, "i
am a boy !"]

["
b", " ", "b",
6, "i
am a boy !"]

输出：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分)

JavaScript的replace函数再加上正则的高级应用，JavaScript的replace将会发回更大的威力所在，在这里将不再深入正则高级应用断言之类的。