[正则表达式] - replace

作者：zccst


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

str.replace(old,new);

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



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

例如，jQuery中$.camelCase的实现细节。
var ret = $.camelCase(str);

// 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()
    ;} );
};

正则 /(^|\s)([a-z])/g 的意思是：开头或空白字符，并且后面紧邻一个a-z之间的字符。

打印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将会发回更大的威力所在，在这里将不再深入正则高级应用断言之类的。


[size=large]（一）理论[/size]
[b]js的replace函数规范如下[/b]
stringObject.replace(regexp/substr,replacement)

[b]参数[/b]
regexp/substr 必需。规定子字符串或要替换的模式的 RegExp 对象。请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。
replacement 必需。一个字符串值。规定了替换文本或生成替换文本的函数。

[b]返回值[/b] 一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。


[b]说明[/b]

字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串，然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。

replacement 可以是字符串，也可以是函数。如果它是字符串，那么每个匹配都将由字符串替换。但是 replacement 中的 $ 字符具有特定的含义。如下表所示，它说明从模式匹配得到的字符串将用于替换。


[size=large]（二）实例[/size]
例如，"hand hand hand"想变换为"hand.gif hand.gif hand.gif"

str = str.replace(/hand/,"hand.gif")
无效。。。
全部替换要加g，
str = str.replace(/hand/g,"hand.gif")
还是不行

参考了JavaScript的replace方法与正则表达式结合应用讲解这篇文章后，终于明白，原来要用()括起来，才会替换()里的东东。正确的写法如下：
str = "hand hand hand";
str=str.replace(/(hand)/g,"hand.gif");
document.write(str);
正确输出：hand.gif hand.gif hand.gif。

JS的正则另一种写法是使用RegExp：
如str=str.replace(/(hand)/g,"hand.gif");
等同于：
reg = new RegExp("(hand)","g");
str = str.replace(reg,'hand.gif');
reg需要动态生成时更适合使用这种方式。

扩展一下：
str = "hand'( hand'( hand'(";
str=str.replace(/(hand\'\()/g,"hand.gif");
document.write(str);

str = 'hand\'( hand\'( hand\'(';
str=str.replace(/(hand\'\()/g,"hand.gif");
document.write(str);