学习JavaScript的String类型replace()方法

JavaScript字符串的replace()方法介绍

为了简化替换子字符串的操作，ECMAScript提供了replace()方法。这个方法接收两个参数：

• 第一个参数：必需。可以是一个字符串（这个字符串不会转换成正则表达式）或者是一个RegExp函数。如果第一个参数是字符串，那么只会替换第一个子字符串。要想替换所有子字符串，唯一的办法就是提供一个正则表达式，并且要指定全局g标志。
• 第二个参数：必需。是一个字符串也可以是一个函数。

注意：原字符串不会改变。

StringObject.replace(searchValue,replaceValue)

1. StringObject:字符串

2. searchValue：字符串或正则表达式

3. replaceValue:字符串或者函数

4. 返回值: 一个部分或全部匹配由替代模式所取代的新的字符串。

上述介绍后，replace()方法就有如下的4种使用方式：

• 第一个参数为字符串，第二个参数也是字符串
• 第一个参数是字符串，第二个参数是函数
• 第一个参数是正则表达式，第二参数是字符串
• 第一个参数是正则表达式，第二个参数是函数

下面会逐一介绍这四种使用方式。

一、replace()方法第一个参数传入字符串和第二个参数传入字符串的方式

如果第一个参数是字符串，只会替换第一个子字符串。

var text = 'cat,bat,sat,fat';
var result = text.replace('at','ond');
//cond,bat,sat,fat
console.warn(result);
var newStr =  'I am loser,You are loser'.replace('loser','hero');
//I am hero,You are loser  
console.warn(newStr);

二、replace()方法第一个参数传入字符串和第二个参数传入函数的方式

第二个参数传入函数的方式，在只有一个模式匹配项（与模式匹配的字符串）的情况下，会向这个函数传递三个参数：

1. 模式的匹配项
2. 模式的匹配项在字符串中的位置
3. 原始字符串。

var text = 'cat,bat,sat,fat';
var result = text.replace('at',function(match,pos,orginalText){
  //at
  console.warn(match);  
  //1
  console.warn(pos);
  //cat,bat,sat,fat
  console.warn(orginalText);
  //返回值为需要替换的新值
  return 'ond';      
});
//cond,bat,sat,fat
console.warn(result);

三、replace()方法第一个参数传入正则表达式和第二个参数传入字符串的方式

如果第一个参数是正则表达式，就会替换所有子字符串。

var text = 'cat,bat,sat,fat';
var result = text.replace(/at/g,'ond');
//cond,bond,sond,fond
console.warn(result);
var newStr =  'I am loser,You are loser'.replace(/loser/g,'hero');
//I am hero,You are hero
console.warn(newStr);

如果第二个参数是字符串的话，还可以用特殊的字符序列，将这则表达式操作得到的值插入结果字符串中。(如果字符串中有几个特定字符的话，会被转换为特定字符串)。

字符序列 ------------	替换文本
$$	指代美元符号$
$&	匹配整个模式的子字符串。与RegExp.lastMatch的值相同
$`	匹配子字符串之前的子字符串 (匹配结果前面的文本)
$'	匹配子字符串之后的子字符串 (匹配结果后面的文本)
$n	匹配第n个捕获组的子字符串(n = 0~9)。如：$1匹配第一个捕获的子字符串，$2是匹配第二个捕获的子字符串。以此类推。
$nn	匹配第n个捕获组的子字符串，（n = 01~99）。如：$01匹配第一个捕获的子字符串，$02是匹配第二个捕获的子字符串。以此类推

3.1、使用$$字符给匹配字符加美金符号$

var text='100.00'; 
var result = text.replace('','$$');
//$100.00
console.warn(result);

3.2、使用$&字符给匹配字符加大括号

var text='讨论一下正则表达式中的replace的用法'; 
var result = text.replace(/正则表达式/,'{$&}');
//讨论一下{正则表达式}中的replace的用法
console.warn(result);

3.3、使用$`字符替换内容

• $`
• $'

var result1 = 'A@B'.replace(/@/,'$`');  
var result2 = 'A@B'.replace(/@/,"$'");
//AAB       匹配左侧
console.warn(result1);
//ABB       匹配右侧
console.warn(result2);;

3.4、使用分组匹配组合新的字符串（$n $nn）

交换一个字符串中两个单词的位置，这个脚本使用$1 和 $2 代替替换文本。

var re = /(\w+)\s(\w+)/;
var text = "liLei hanMeiMei";
var result = text.replace(re, "$2, $1");
// hanMeiMei, liLei
console.warn(result);

四、replace()方法第一个参数传入正则表达式和第二个参数传入函数的方式

第二个参数传入函数的方式，在正则表达式定义了多个捕获组的情况下，传递给函数的参数依次是：

• 模式的匹配项
• 第一个捕获组的匹配项、第二个捕获组的匹配项……
• 最后两个参数依然分别是模式的匹配项在字符串中的位置和原始字符串。

var text = 'haiandao3@163.com';
var result = text.replace(/(.+)(@)(.*)/,function(match,pos,orginalText){
    for (var i = 0; i < arguments.length; i++) {
        //模式的匹配项：haiandao3@163.com
        //第1个捕获组的匹配项：haiandao3
        //第2个捕获组的匹配项：@ 
        //第3个捕获组的匹配项：163.com 
        //模式的匹配项在字符串中的位置：0
        //原始字符串：haiandao3@163.com
        console.warn(arguments[i]);
    }
    return '返回值会替换掉匹配到的目标';
});
//返回值会替换掉匹配到的目标
console.warn(result);   

var text = 'haiandao3@163.com';
var result = text.replace(/(.+)(@)(.*)/,function(match,...arr){
  const len = arr.length
  const matchs = arr.slice(0,len - 2)
  const pos = arr[len - 2]
  const orginalText = arr[len - 1]
  //模式的匹配项：haiandao3@163.com
  console.warn(match)
  //第1个、第2个和第3个捕获组的匹配项：["haiandao3", "@", "163.com"]
  console.warn(matchs)
  //模式的匹配项在字符串中的位置：0
  console.warn(pos)
  //原始字符串：haiandao3@163.com
  console.warn(orginalText)
  return '返回值会替换掉匹配到的目标';
});
//返回值会替换掉匹配到的目标
console.warn(result);   

五、应用场景

5.1、替换html标签

function htmlEscape( text ){
    return text.replace(/[<>"&]/g,function(match,pos,orginalText){
        switch (match){
            case '<': return '小于';
            case '>': return '大于';
            case '&': return '&amp';
            case '\"': return '双引号';
        }
    })
}
//小于p class=双引号greeting双引号大于helloWorld小于/p大于
console.warn(htmlEscape('<p class="greeting">helloWorld</p>'));

5.2、使用自定义函数将字符串大写子母改为小写子母

var result = 'JAVASCRIPT'.replace(/[A-G]/g,function(match,pos,orginalText){ 
  return arguments[0].toLowerCase(); 
})
//JaVaScRIPT
console.warn(result)

5.3、Simple JavaScript Template 简单的JavaScript渲染模板

function substitute (str, obj) {
  if (!(Object.prototype.toString.call(str) === '[object String]')) {
    return '';
  }
  if(!(Object.prototype.toString.call(obj) === '[object Object]' && 'isPrototypeOf' in obj)) {
    return str;
  }
  return str.replace(/\{([^{}]+)\}/g, function(match, key) {
    var value = obj[key];
    return ( value !== undefined) ? '' + value : '';
  });
}
var obj = {
    url: 'http://www.163.com',
    title: '我是标题',
    text: '我是文本'
};
var link = '<a href="{url}" title="{title}">{text}</a>';
var result = substitute(link, obj);
//<a href="http://www.163.com" title="我是标题">我是文本</a>
console.warn(result)

5.4、数字转为千分位

var text = '1234567890';
var result = text.replace(/(\d)(?=(\d{3})+(?!\d))/g,'$1,');
//1,234,567,890           
console.warn(result)

5.5、驼峰命名方式转-命名方式和-命名方式转驼峰命名方式

var text = "shouHou";
var result = text.replace(/([A-Z])/g,"-$1").toLowerCase();
//shou-hou
console.warn(result)

var text = 'shou-hou';
var result = text.replace(/-(\w)/g,function(match,matches,pos){
  return matches.toUpperCase();
}); 
//shouHou
console.warn(result);   

5.6、把手机号第4位到第7位替换成****

var text = '15560099568';
var result = text.replace(/1(\d{2})\d{4}(\d{4})/g,"1$1****$2");
//155****9568
console.warn(result)

六、参考链接

• https://book.douban.com/subject/10546125/
• http://javascript.ruanyifeng.com/stdlib/regexp.html#toc8
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace
• https://zhuanlan.zhihu.com/p/32179882