【javascript杂谈】你所不知道的replace函数

前言

最近在作面试题的时候总会用到这个函数，这个函数老是和正则表达式联系到一块儿，而且效果非常不错，总能很简单出色的完成字符串的实际问题，你们确定都会使用这个函数，像我同样的初学者可能对这个函数的了解仍是不够深的，今天就总结一下，了解一下，再作几道网上的题目练练手，给将要面试的同窗打打气。

介绍

使用一个替换值替换掉一个替换模式在原字符串中一个或全部的匹配项，并返回替换后的字符串，这个替换模式能够是字符串或者正则表达式，替换值能够是一个字符串或者是一个函数。

后面的大的黑体就是咱们开始没有注意到的。

语法

newstring = str.replace(regexp|substr, newSubStr|function[,  flags]);这是官方的解释不是很清楚，一会好好解释下。

参数

regexp

一个 REGEXP(正则)对象，该正则所匹配的内容会被第二个参数的返回值替换掉。

substr

被 替换掉的一个字符串

newSubStr

替换掉第一个参数在原字符串中的匹配部分，该字符串中能够内插一些特殊的变量名。对于正则replace约定了一个特殊标记符$：

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

function

是一个函数，能够有返回值，也能够无返回值。参数的个数不固定，参数挺麻烦的，咱主要就是说这个函数，

1. 第一个参数为每次匹配的全文本（$&），就是整个匹配的字符串
2. 中间参数为子表达式匹配字符串，个数不限.( $n (n:1-99))，有分组的时候
3. 倒数第二个参数为匹配文本字符串的匹配下标位置。
4. 最后一个参数表示字符串自己。

这个函数在执行replace时执行，若是有返回值，返回值用来替换replace的第一个参数。

flags

就是正则表达式那些特殊的标志，无关紧要的，当第一个参数是字符串的时候使用。

g   全局替换

i   忽略大小写

m   多行模式

y      sticky

注意：replace函数并不改变原来的字符串，而是返回来一个新的字符串。

好多例子

说估计你们也是不明白，如今我把全部的状况弄个例子，帮助你们理解：

例子1：

//replace(str,str);
var str = "I am hainan";
var newStr = str.replace("hainan","Allenxing");
console.log(newStr);//I am Allenxing 
console.log(str);//I am hainan

例子2：

// replace(str,str,flag)
var str = "I am hainan hainan";
var newStr = str.replace("hainan","Allenxing","gi");
console.log(newStr);//I am Allenxing Allenxing(FireFox下)  I am Allenxing Allenxing(chrome IE下)  
console.log(str);//I am hainan hainan

这种各状况个浏览器支持的很差，建议使用带标记的正则表达式，而不是使用字符串的这种标记，官方这样说

A string specifying a combination of regular expression flags. The use of the flags parameter in the String.replace method is non-standard, use a RegExp object with the corresponding flags.

例子3：

// replace(RegExp,str)
var str = "I am hainan hainan";
var newStr1 = str.replace(/hainan/,"Allenxing");
console.log(newStr1);//I am Allenxing hainan 

var newStr2 = str.replace(/hainan/g,"Allenxing");
console.log(newStr2);//I am Allenxing Allenxing

var str1 = "I am hainan Hainan";
console.log(str1.replace(/hainan/ig,"Allenxing"));//I am Allenxing Allenxing 
console.log(str1.replace(/hainan/g,"Allenxing"));//I am Allenxing Hainan

例子4：$1是匹配第一个分组的内容,$2是匹配第一个分组的内容......

//replace(RegExp,'特殊标记')
var str = "I am hainan hainan";
console.log( str.replace(/(hainan)/,"*$1*") );//I am *hainan* hainan 

解释一下：/(hainan)/ 匹配的是第一个hainan，咱们使用"*$1*"的意思就是"*hainan*"，用它替换hainan，是第二个参数替换前面的总体。

例子5：

//replace(RegExp,'特殊标记')
var str = "I am hainan Allenxing";
console.log( str.replace(/(hainan)\s*(Allenxing)/g,"$2 $1") );//I am Allenxing hainan 

例子6：

//replace(RegExp,'特殊标记')
var str = "I am hainan Allenxing";
console.log( str.replace(/(hainan)\s*(?:Allenxing)/g,"$2 $1") );//I am $2 hainan 

解释：(?:)是非捕获分组，匹配内容可是不捕获，也就是$2中如今没有内容，那么就按照$2是个字符串输出。

例子7：$&表明正则匹配的总体

//replace(RegExp,'特殊标记')
var str = "hainan";
console.log( str.replace(/(h)ainan/g,"$& starts with $1") );//hainan starts with h 

例子8：$`表示匹配字符串的左边文本，$’(‘:单引号)表示匹配字符串的右边文本。

//replace(RegExp,"特殊标记")
var str = "javascript";
console.log(str.replace(/java/,"$&$' is "));//javascript is script 

console.log(str.replace(/script/,"$& is not $`"));//avascript is not java 

参数是function 

咱们前面简单介绍了参数function，咱们写个例子看看这个函数的参数都有什么东西，

//replace(RegExp,function)
var str = "I am hainan Allenxing";
console.log( str.replace(/(hainan)\s*(Allenxing)/g,function(){
  console.(arguments);//看看参数的样子
}) );

看截图吧，清楚些

这样能够清楚的看出来，函数的第一个参数是正则匹配的全文本(hainan Allenxing)，第二个是第一个分组匹配的文本(hainan)，第三个是第二个分组匹配的文本(Allenxing)，第四个参数是匹配文本字符串的匹配下标位置，第五个参数是整个输入的字符串(I am hainan Allenxing)。后面的几个参数的位置肯能会改变，由于再有分组的话，中间分组的参数个数会增长。

再看下结果，I am undefined  ，因为咱们function没有明确返回值，因此就是undefined，用undefined替换了正则匹配的全文本。

还有一个问题就是，匹配的时候这个function要执行几回呢？每一次里面的参数的值会发生什么变化呢？看例子

//replace(RegExp,function)
var str = "I am hainan hainan";
console.log( str.replace(/(hainan)/g,function(){
  console.log(arguments);
}) );

结果就是这样

这个能够看出，function执行了两遍，就是由于正则(/(hainan)/g)匹配了两遍，咱们能够再验证一下，

//replace(RegExp,function)
var str = "I am hainan hainan";
console.log( str.replace(/(hainan)/,function(){
  console.log(arguments);
}) );

确实是这样吧，里面的参数时每一次匹配的结果。而咱们每次替换的值就是第一个参数的值，由于第一的参数就是正则匹配的全文本嘛。

用function解决几个前面的例子吧

先看例子5那个

//replace(RegExp,'特殊标记')
var str = "I am hainan Allenxing";
console.log(str.replace(/(hainan)\s*(Allenxing)/g,function(arg0,arg1,arg2){
     return arg2 + " " + arg1;     
}));
//I am Allenxing hainan

再看例子8

var str = "javascript";
console.log(str.replace(/java(script)/g,function(arg0,arg1){
   return arg0 +" is " + arg1;
}))

都是差很少的，只是用function作参数时，咱们不能使用原来的正则表达式来获得匹配字符的左右的字符，须要修改正则表达式。

弄一个实际的例子，查找字符串中出现最多的字符和个数？   例如：sdjksfssscfssdd  -> 字符最多的是s，出现了7次。用replace函数解决。

var str = "sdjksfssscfssdd";
str = str.split("").sort().join("");
var count = 0;
var val;
str.replace(/(\w)\1*/g,function(arg0,arg1){
    if(arg0.length > count){
      count = arg0.length;
      val = arg1;
    }
});    
console.log(val+" 出现了"+count+" 次");

小结

replace函数就总结到这，其实它能作好多事情，其实主要是正则表达式的功劳，正则表达式这里就不详细说了，园子里好多牛人都总结过，你们能够找找看看，想要面试的同窗好好准备吧。