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()\dots$ &’识别为一个普通字符串对象，这句代码将会原模原样的返回’ $KaTeX parse error: Expected 'EOF', got '&' at position 1: &̲’。之后，replace()函\dots$ &’识别为一个模式，即匹配到的字符串。

使用内敛函数代替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循环本可以完成的工作。

JavaScript中String的replace方法详解