HiDocs
Search K

Appearance

一文搞懂replace函数 ​

1.repalce介绍 ​

replace() 是 JavaScript 字符串对象的方法之一，用于在字符串中查找匹配某个模式的子字符串，并将其替换为指定的新字符串。replace() 方法不会修改原始字符串，而是返回一个新的字符串，其中匹配的子字符串被替换为新的内容。

一句话：用于做字符串的替换重构，类似于数组的map方法

replace() 方法的语法如下：

string.replace(searchValue, newValue)

参数说明：

  • searchValue：一个正则表达式或要被替换的子字符串。
  • newValue：替换后的新字符串。

replace的用法：三种

除了上述的基本使用方法，replace() 方法还可以配合正则表达式、回调函数等更加复杂的用法，例如：

  1. 使用字符串进行简单替换：
js
const originalString = "Hello, World!";
const newString = originalString.replace("Hello", "Hi");
console.log(newString); // 输出 "Hi, World!"
  1. 使用正则表达式进行简单替换：
js
const originalString = "apple apple apple";
const newString = originalString.replace(/apple/g, "orange");
console.log(newString); // 输出 "orange orange orange"
  1. 使用正则表达式+回调函数进行复杂的重构替换：
js
const originalString = "Hello, World!";
const newString = originalString.replace(/World/, match => match.toUpperCase());
console.log(newString); // 输出 "Hello, WORLD!"

需要注意的是，replace() 方法只会替换第一个匹配项，如果你希望替换所有匹配项，需要使用正则表达式，并且使用 g 标志进行全局匹配。

2.replaceAll() ​

replaceAll() 是 JavaScript 字符串对象的一个方法，用于替换字符串中所有匹配某个模式的子字符串，并将它们替换为指定的新字符串。与 replace() 方法不同，replaceAll() 方法会替换所有匹配项，而不仅仅是第一个匹配项。

所以originalString.replace("Hello", "Hi");默认是只替换第一个Hello的，而originalString.replaceAll("Hello", "Hi");会替换所有的Hello

注意：

js
originalString.replace(/Hello/g, "Hi");
//等价于
originalString.replaceAll("Hello", "Hi");

只要正则表达式开启了/g模式，那么就会匹配所有的项了

3.replace的正则表达式+回调函数用法详解 ​

replace回调函数的参数是什么？

replace() 方法中的回调函数的参数是根据匹配项的个数而变化的。具体来说，回调函数的参数有以下几个：

  1. 第1个参数：匹配的子字符串（如果是正则表达式，即为匹配的部分）。
  2. 第2-n个参数：正则表达式的捕获组（如果有）。注意：捕获组的个数=n-2
  3. 第n+1个参数：匹配的子字符串在原始字符串中的索引。
  4. 第n+2个参数：原始字符串。

以下是一个示例，展示了回调函数的参数如何传递：

js
const originalString = "apple, banana, cherry";

const newString = originalString.replace(/(apple|banana|cherry)/g, (match, p1, offset, str) => {
  console.log(`Match: ${match}`); //第一次输出：apple
  console.log(`Capture group: ${p1}`); //第一次输出：apple，因为这里只有一个捕获组，所以p1=match
  console.log(`Index: ${offset}`);
  console.log(`Original string: ${str}`);
  console.log("--------------");
  return match.toUpperCase();
});

console.log(newString);

注意：正则表达式的/g实际上对于replace相当于开启了一个循环遍历，会对于匹配到的每一项应用相应的对调函数！

什么是捕获组？

正则表达式里面一个()就是一个捕获组！

多个捕获组的实例

js
const originalString = "John Smith (25), Jane Doe (30), Alex Johnson (28)";

const newString = originalString.replace(
  /([A-Z][a-z]+)\s([A-Z][a-z]+)\s\((\d+)\)/g,
  (match, firstName, lastName, age, offest, str) => {
    console.log(`offest: ${offest}, str: ${str}`);
    return `match: ${match}, Name: ${lastName}, ${firstName}; Age: ${age}`;
  }
);

console.log(newString);

结果：我们发现第2-4个参数都是捕获组的内容：lastName、firstName、age，因为正则表达式里面有3个括号

image-20230816164814154