js中的replace方法

本文主要研究字符串方法中的replace方法，该方法主要用于将字符串中符合匹配条件的字串替换成其他的字符串，返回替换后的字符串，且原字符串不变。
语法：

	var newStr = str.replace(regexp|substr, newSubStr|function)

参数1：匹配条件：可以是正则表达式(regexp)或者字符串(substr)

如果参数1是字符串的话仅匹配一次。

   var  str = '#home#home'
   var pattern1= 'home'
   var newStr1 = str.replace(pattern1, 'home1') //得到newStr1的结果为"#home1#home"

如果参数1是正则表达式的话

先考虑没有全局标志g和捕获组的情况：

   var  str = '#home#home'
   var pattern2= /home/
   var newStr2 = str.replace(pattern2, 'home1') //得到newStr2的结果为"#home1#home"

即在没有全局标志g和捕获组的情况下，也是只匹配一次。
如果在有全局标志g的情况下：

	var  str = '#home#home'
	var pattern3= /home/g
	var newStr3= str.replace(pattern3, 'home1') //得到newStr3的结果为"#home1#home1"

即在有全局标志g的情况下可以实现全局多次匹配。
如果在有捕获组的情况下：

	var str = "John Smith";
	var pattern4 = /(\w+)\s(\w+)/;
	var newStr4= str.replace(pattern4, 'zyp') //得到newStr4的结果为"zyp"

即针对参数1pattern是捕获组的情况，参数2是字符串，那么该字符串替换第一个捕获组，其余的捕获组被空字符串替换，所以当参数1pattern中存在捕获组的情况下，参数2一般是一个函数或者特殊变量名（下面将要讲到）。
以上考虑的都是参数2是字符串的情况。

参数2：可以是替换字符串( newSubStr)或者是方法(function)

如果参数2是替换字符串
上面针对参数1的几个例子都是参数2是字符串的情况，还有一种需要注意的情况是：参数2的字符串中可以插入以下特殊的变量名：
$$ ：插入一个 “$”。
$& ：插入匹配的子串。
$` ：插入当前匹配的子串左边的内容。
$’ ：插入当前匹配的子串右边的内容。
$n ：假如第一个参数是 RegExp对象，并且 n 是个小于100的非负整数，那么插入第 n 个括号匹配的字符串。索引是从1开始。
最常见的特殊变量名是 $n：

   var str = "John Smith";
   var pattern5 = /(\w+)\s(\w+)/;
   var newStr5= str.replace(pattern5, '$2 $1') //得到newStr5的结果为"Smith John"

如果参数2是函数
该函数可能有以下几个参数：

match: 每次匹配得到的字符串。如果正则表达式中含有全局标志g的话，那么函数每次匹配到结果函数都会执行一次，即函数会执行多次，每次匹配得到的字符串就是match。

针对参数match来说，以下例子可以进行说明：
```
function styleHyphenFormat(propertyName) {
  function upperToHyphenLower(match) {
    return '-' + match.toLowerCase();
  }
  return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
}
var styleFormat = styleHyphenFormat('borderLeftWidth') // styleFormat的结果是"border-left-width"
```
上述例子应该即是jquery的css函数中的实现，巧用match参数可以有效的避免循环。
p1, p2…: 捕获组匹配到的字符串。如果正则表达式中含有捕获组的话，
针对p1,p2…等参数来说，以下例子可以进行说明：
```
function replacer(match, p1, p2, p3, offset, string) {
	console.log(match)
  	return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer); // newString的结果是 abc - 12345 - #$*%
```
注意上述例子中的match打印出来的结果是‘abc12345#$*%’，即如果pattern中没有全局标志g的话，match参数得到的就是match方法中参数1pattern中包含捕获组情况下得到的数组的第一个元素，关于match方法的介绍，可以参见我的另外一篇博客字符串搜索匹配之match&&exec。
offset：每次匹配得到的字符串在源字符串中的偏移量。（比如，如果原字符串是“abcd”，匹配到的子字符串是“bc”，那么这个参数将是1）

扫描二维码关注公众号，回复： 4482639 查看本文章
string: 被匹配的原字符串。

总结：对于replace方法来说，如果参数1是字符串或者是不带全局标志g的正则表达式，那么只进行一次匹配；如果参数1中带有全局标志g，那么会进行多次匹配，不管参数2是字符串还是函数，都会进行多次替换（如果是函数的话是用函数的返回值进行多次替换）；如果参数1中带有捕获组的话，那么一般参数2如果是函数，那么函数的p1,p2…等参数对应的就是1，2…等捕获组捕获到的子串，参数2如果是字符串的话，$1,$2…等特殊变量对应的就是1，2…等捕获组捕获到的子串。

参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace#使用字符串作为参数

猜你喜欢