String.prototype.replace()
replace()方法将一个字符串中被模式匹配的部分替换成新值,并返回这个替换后的新字符串对象。这个模式可以是一个字符串或者一个正则表达式,用于替换的新值可以是一个字符串或一个回调函数,这个回调函数在每次匹配成功时都会调用。如果模式是一个字符串,那只有第一次匹配时才会发生替换。replace()方法将返回一个新的字符串,原来的字符串不会发生任何变化。
var p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
var regex = /dog/gi;
console.log(p.replace(regex, 'ferret'));
// 输出: "The quick brown fox jumps over the lazy ferret. If the ferret reacted, was it really lazy?"
console.log(p.replace('dog', 'monkey'));
// 输出: "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"
语法
str.replace(regexp|substr, newSubStr|function)
参数
regexp
一个正则表达式。匹配成功后将被newSubStr替换,或被function返回的值替换。
substr
一个字符串,匹配成功后将被newSubStr替换。只有第一次匹配时会被替换。
newSubStr
一个字符串,用于替换匹配项的新值。replace()函数内部为这个参数提供了一些特殊模式,详细描述见下文“描述”中的第一节“传入字符串作为参数”。
function
一个用于生成字符串的方法,生成的字符串将替换被模式匹配的项。这个方法是一个回调函数,他接收replace()函数内部传入的参数,详细描述见下文“描述”中的第二节“传入函数作为参数”。
返回值
函数返回一个新字符串,其中部分或全部匹配项被替换(根据入参而定)。
描述
String.prototype.replace()方法不会改变原有的字符串,他返回一个新的字符串。如果想要进行全局替换,那需要在入参的正则表达式中携带g修饰符。
传入字符串作为参数
String.prototype.replace()函数的第二个参数newSubStr可以是如下所示的特殊模式:
模式 | 对应的替换值 |
---|---|
$$ | 在替换位置插入”$” |
$& | 在替换位置插入匹配到的子字符串 |
$` | 在替换位置插入在匹配到的字符串前面的子字符串 |
$’ | 在替换位置插入在匹配到的字符串后面的子字符串 |
$n | 如果n是一个正整数且n小于100,插入对应序号为n的捕获组,此时replace()函数的第一个参数必须为正则表达式。注意,捕获组第一项为$1,第二项为$2,以此类推 |
传入函数作为参数
String.prototype.replace()函数可以接收函数作为第二个参数。在这种情况下,当匹配成功时,回调函数将被调用。回调函数的返回值将用做替换值(注意,前文提到的newSubStr的特殊模式在回调函数中无效)。如果String.prototype.replace()函数的第一个参数是正则表达式并且有g修饰符,则String.prototype.replace()函数每次匹配成功时,都会调用一次回调函数。
传入回调函数的参数如下:
参数名 | 参数值 |
---|---|
match | 等同于匹配项的子字符串,对应于前文的$& |
p1,p2,… | 如果String.prototype.replace()函数的第一个参数为正则,则此项为对应的捕获组。举个例子,如果正则表达式为/(\a+)(\b+)/,那么p1就是\a+的匹配项,p2就是\b+的匹配项 |
offset | 当前匹配项在整个字符串中的索引。举个例子,如果整个字符串是”abcd”,而匹配项是”bc”,那么offset就是1 |
string | 调用String.prototype.replace()函数的整个字符串 |
回调函数中具体被传入的参数数量取决于String.prototype.replace()函数的第一个参数是否为正则表达式,以及该正则表达式中包含多少个捕获组:
function replacer(match, p1, p2, p3, offset, string) {
// p1匹配非数字, p2匹配数字, p3匹配非字母非数字
return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
console.log(newString); // 输出:abc - 12345 - #$*%
示例
在String.prototype.replac()函数中定义正则表达式
var str = 'Twas the night before Xmas...';
var newstr = str.replace(/xmas/i, 'Christmas');
console.log(newstr); // Twas the night before Christmas...
在正则表达式中携带gi修饰符
想要使用replace()函数进行全局替换,参数必须是正则表达式并且有g修饰符。携带有g修饰符的正则表达式将会匹配字符串中所有出现的值。
var re = /apples/gi;
var str = 'Apples are round, and apples are juicy.';
var newstr = str.replace(re, 'oranges');
console.log(newstr); // oranges are round, and oranges are juicy.
在字符串中旋转单词
var re = /(\w+)\s(\w+)/;
var str = 'John Smith';
var newstr = str.replace(re, '$2, $1');
console.log(newstr); // Smith, John
使用内联函数来替换字符
在下面的代码中,程序将所有大写的英文字母替换成”连字符’-‘+小写字母”的形式。因此在这个场景中,我们需要拿到匹配项,将他转换为小写字符,再为他添加一个连字符,最终返回。
function styleHyphenFormat(propertyName) {
function upperToHyphenLower(match, offset, string) {
return (offset > 0 ? '-' : '') + match.toLowerCase();
}
return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
}
styleHyphenFormat('borderTop'); //输出border-top
当使用replace()函数时,如果想要在替换之前对匹配项进行一些转换操作,必须使用回调函数的形式。如果没使用回调函数,对匹配项的操作将会不生效:
// 转换不会成功,输出borderTop
var newString = propertyName.replace(/[A-Z]/g, '-' + '$&'.toLowerCase());
'KaTeX parse error: Expected 'EOF', got '&' at position 1: &̲'.toLowerCase()…&’识别为一个普通字符串对象,这句代码将会原模原样的返回’KaTeX parse error: Expected 'EOF', got '&' at position 1: &̲’。之后,replace()函…&’识别为一个模式,即匹配到的字符串。
使用内敛函数代替for循环进行字符串检查
假设我们需要对字符串进行某种循环处理:一个x代表true;一个连字符-代表false;一个x后面跟下划线_,此时下划线可以多次出现,代表x的长度。要进行这种处理,可以使用字符串for循环,replace()函数同样可以完成这种工作:
var str = 'x-x_';
var retArr = [];
str.replace(/(x_*)|(-)/g, function(match, p1, p2) {
if (p1) { retArr.push({ on: true, length: p1.length }); }
if (p2) { retArr.push({ on: false, length: 1 }); }
});
console.log(retArr);
上面的代码展示了replace()函数如何实现一个for循环本可以完成的工作。