JavaScript中String的replace方法详解

小灰灰 2022-03-09 13:46 500阅读 0赞

# 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可以是如下所示的特殊模式：

<table> 
 <thead> 
  <tr> 
   <th align="left">模式</th> 
   <th align="left">对应的替换值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">$$</td> 
   <td align="left">在替换位置插入”$”</td> 
  </tr> 
  <tr> 
   <td align="left">$&amp;</td> 
   <td align="left">在替换位置插入匹配到的子字符串</td> 
  </tr> 
  <tr> 
   <td align="left">$`</td> 
   <td align="left">在替换位置插入在匹配到的字符串前面的子字符串</td> 
  </tr> 
  <tr> 
   <td align="left">$’</td> 
   <td align="left">在替换位置插入在匹配到的字符串后面的子字符串</td> 
  </tr> 
  <tr> 
   <td align="left">$n</td> 
   <td align="left">如果n是一个正整数且n小于100，插入对应序号为n的捕获组，此时replace()函数的第一个参数必须为正则表达式。注意，捕获组第一项为$1，第二项为$2，以此类推</td> 
  </tr> 
 </tbody> 
</table>

### 传入函数作为参数 ###

String.prototype.replace()函数可以接收函数作为第二个参数。在这种情况下，当匹配成功时，回调函数将被调用。回调函数的返回值将用做替换值（注意，前文提到的newSubStr的特殊模式在回调函数中无效）。如果String.prototype.replace()函数的第一个参数是正则表达式并且有g修饰符，则String.prototype.replace()函数每次匹配成功时，都会调用一次回调函数。  
传入回调函数的参数如下：

<table> 
 <thead> 
  <tr> 
   <th align="left">参数名</th> 
   <th align="left">参数值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">match</td> 
   <td align="left">等同于匹配项的子字符串，对应于前文的$&amp;</td> 
  </tr> 
  <tr> 
   <td align="left">p1,p2,…</td> 
   <td align="left">如果String.prototype.replace()函数的第一个参数为正则，则此项为对应的捕获组。举个例子，如果正则表达式为/(\a+)(\b+)/，那么p1就是\a+的匹配项，p2就是\b+的匹配项</td> 
  </tr> 
  <tr> 
   <td align="left">offset</td> 
   <td align="left">当前匹配项在整个字符串中的索引。举个例子，如果整个字符串是”abcd”，而匹配项是”bc”，那么offset就是1</td> 
  </tr> 
  <tr> 
   <td align="left">string</td> 
   <td align="left">调用String.prototype.replace()函数的整个字符串</td> 
  </tr> 
 </tbody> 
</table>

回调函数中具体被传入的参数数量取决于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()函数同样可以完成这种工作：

上面的代码展示了replace()函数如何实现一个for循环本可以完成的工作。