替换操作

Mr.Liu大约 4 分钟

替换操作

replace()函数

replace([RegExp|String],[String|Function])

该方法返回一个新的字符串，但并不改变字符串本身

该方法接收2个参数
第一个参数可以是字符串，也可以是一个正则表达式；
第二个参数可以是一个字符串，也可以是一个函数。

replace(字符串,字符串)

let str = '我爱背景天安门';
str = str.replace('背景','北京');
console.log(str);   // 输出结果：我爱北京天安门

但这个用法有一个问题

let str = '我爱背景天安门，但是背景雾霾太严重';
str = str.replace('背景','北京');
// 输出结果：我爱北京天安门，但是背景雾霾太严重
console.log(str);

我们发现，如果字符串str中有多个待替换的子串，比如本例中的“背景”，出现了2次，那么replace()方法只能给我们用目标字符串(北京）替换掉第1次出现的"背景"。

如果想把所有的"背景"都给替换了，就必须调用多次。

此使用方法bug：只能替换一次多次替换需要多次调用

replace(正则表达式,字符串)

let str = '我爱背景天安门，但是背景雾霾太严重';
str = str.replace(/背景/g,'北京');
// 输出结果：我爱北京天安门，但是北京雾霾太严重
console.log(str);

这里需要说明的是，str.replace(/背景/g,“北京”)的第一个参数 ”/背景/g“ 是一个正则表达式，使用/ /的正则写法是JavaScript中正则表达式的字面量写法。
在此处，正则表达式的末尾有个g，它表示match源字符串str中所有匹配项。
这里如果没有g，那么也只能匹配到第一个错别字”背景“，只有加了这个g，才能匹配到所有的”背景“。

replace(正则表达式,function(){})

本质： 对str使用RegArg做match()匹配，如果匹配到多项结果（比如使用了全局匹配g，或者分组），那么每一个匹配结果都将执行一次FuncArg函数，并且用该函数的返回值替代源字符串中的匹配项。

简单用法，正则表达式不使用分组

let str = '我爱背景天安门，但是背景雾霾太严重';
str = str.replace(/背景/,function(){
    console.log(arguments);
    // [Arguments] { '0': '背景', '1': 2, '2': '我爱背景天安门，但是背景雾霾太严重' }
    return '北京'
});
console.log(str);
// 我爱北京天安门，但是背景雾霾太严重

解析：

本例的目的是：把原字符串中的’背景’，替换为’北京’。
正则表达式没有使用全局匹配符g，所以只替换了源字符串中第一个‘背景’子串，FuncArg只执行了一次。

replace()函数第一个参数是简单正则表达式，第二个参数是函数时： 这个函数是有参数的，而且这些参数是默认的。

arguments[0]是匹配到的子字符串
arguments[1]是匹配到的子串的索引位置
arguments[2]是源字符串本身本例如果想替换所有的‘背景’为‘北京’，只需要让正则表达式后加个g。

let str = '我爱背景天安门，但是背景雾霾太严重';
str = str.replace(/背景/g,function(){
    console.log(arguments);
    return '北京'
});
console.log(str);

输出了2个Arguments，因为我们使用全局匹配g后，会match到2个项，所以就执行了2次function。第一个跟前边一样，第二个arugments的索引位置是10，因为源字符串中第二个‘背景’的索引是10.

复杂用法，正则表达式使用分组 例子：把所有以“万”为单位的捐款，其金额改为‘元’。比如：4万，改为40000元

var txt ='刘菲:5万。张常成:5000元。孙玉杰:2000元。李明轩:20万。李子豪:8500元。';
txt = txt.replace(/(\d+)(万)/g,function(){
    console.log(arguments);
    return arguments[1] + '0000' + '元';
});
console.log(txt);
// 刘菲:50000元。张常成:5000元。孙玉杰:2000元。李明轩:200000元。李子豪:8500元。

replaceAll()函数

函数可以替换字符串的所有的匹配项

简单示例

let str = 'JS will, JS will, JS will rock you.';
let newStr = str.replaceAll('JS','JavaScript');
console.log(newStr);
// JavaScript will, JavaScript will, JavaScript will rock you.

带回调示例 replaceAll()方法通过正则表达式搜索子字符串。它用回调函数确定的特定替换替换每个匹配项

let str = 'JS will, Js will, js will rock you.';
let pattern = /js/gi;
let newStr = str.replaceAll(pattern, function(match, offset, str) {
    if(match === 'JS') return 'JavaScript';
    if(match === 'Js') return 'Javascript';
    if(match === 'js') return 'javascript';
    return '';
});
console.log(newStr);
// JavaScript will, Javascript will, javascript will rock you.

正则表达式/js/gi匹配包含JS不区分大小写的子字符串的任何字符串，即JS、Js、或js。
replaceAll() 方法用替换回调的返回值替换子串 JS、Js 和 js。