replace的详解和常用的案例

replace 方法用于替换字符串中的子字符串或匹配正则表达式的部分。它返回一个新的字符串，并不改变原字符串。replace 方法可以接受两个参数：要替换的模式（字符串或正则表达式）和替换的内容（字符串或函数）。

会用字符串，不识 replace 也枉然

语法

string.replace(searchValue, newValue)

• searchValue：要替换的子字符串或正则表达式。
• newValue：用于替换的字符串或函数。

基本用法

1. 替换子字符串

const str = "Hello, world!";
const result = str.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

2. 使用正则表达式替换

const str = "Hello, world!";
const result = str.replace(/world/, "JavaScript");
console.log(result); // "Hello, JavaScript!"

使用函数作为替换值

replace 方法可以接受一个函数作为第二个参数。该函数会在每次匹配时被调用，并返回替换的字符串。

1. 基本示例

const str = "Hello, world!";
const result = str.replace(/world/, (match) => {
  return match.toUpperCase();
});
console.log(result); // "Hello, WORLD!"

2. 使用捕获组

假设你有一个日期字符串，格式为 YYYY-MM-DD，你想将其转换为 DD/MM/YYYY 格式。

const dateStr = "2023-10-05";
const result = dateStr.replace(/(\d{4})-(\d{2})-(\d{2})/, (match, year, month, day) => {
  return `${day}/${month}/${year}`;
});
console.log(result); // "05/10/2023"

在这个示例中，正则表达式 (\d{4})-(\d{2})-(\d{2}) 使用了三个捕获组，分别捕获年份、月份和日期。替换函数的参数包括匹配的整个字符串和每个捕获组的内容。这样，你可以轻松地重新排列捕获组的内容来实现所需的格式。

常用案例

1. 替换所有匹配项

默认情况下，replace 方法只替换第一个匹配项。要替换所有匹配项，可以使用全局正则表达式（带有 g 标志）。

const str = "Hello, world! Welcome to the world of JavaScript.";
const result = str.replace(/world/g, "universe");
console.log(result); // "Hello, universe! Welcome to the universe of JavaScript."

2. 替换忽略大小写

使用正则表达式的 i 标志来忽略大小写。

const str = "Hello, World!";
const result = str.replace(/world/i, "JavaScript");
console.log(result); // "Hello, JavaScript!"

3. 替换并保留部分原始字符串

使用捕获组和函数来替换字符串的一部分，同时保留其他部分。

const str = "Hello, world!";
const result = str.replace(/(world)/, (match, p1) => {
  return `beautiful ${p1}`;
});
console.log(result); // "Hello, beautiful world!"

4. 替换数字中的逗号

将数字字符串中的逗号替换为点号。

const str = "1,234,567.89";
const result = str.replace(/,/g, ".");
console.log(result); // "1.234.567.89"

5. 替换模板字符串中的占位符

使用正则表达式替换模板字符串中的占位符。

const template = "Hello, {name}! Welcome to {place}.";
const result = template.replace(/{name}/, "Alice").replace(/{place}/, "Wonderland");
console.log(result); // "Hello, Alice! Welcome to Wonderland."

示例代码

以下是一个包含上述所有案例的示例代码：

const str1 = "Hello, world!";
const result1 = str1.replace("world", "JavaScript");
console.log(result1); // "Hello, JavaScript!"

const str2 = "Hello, world!";
const result2 = str2.replace(/world/, "JavaScript");
console.log(result2); // "Hello, JavaScript!"

const str3 = "Hello, world!";
const result3 = str3.replace(/world/, (match) => {
  return match.toUpperCase();
});
console.log(result3); // "Hello, WORLD!"

const str4 = "Hello, world!";
const result4 = str4.replace(/(world)/, (match, p1) => {
  return p1.toUpperCase();
});
console.log(result4); // "Hello, WORLD!"

const str5 = "Hello, world! Welcome to the world of JavaScript.";
const result5 = str5.replace(/world/g, "universe");
console.log(result5); // "Hello, universe! Welcome to the universe of JavaScript."

const str6 = "Hello, World!";
const result6 = str6.replace(/world/i, "JavaScript");
console.log(result6); // "Hello, JavaScript!"

const str7 = "Hello, world!";
const result7 = str7.replace(/(world)/, (match, p1) => {
  return `beautiful ${p1}`;
});
console.log(result7); // "Hello, beautiful world!"

const str8 = "1,234,567.89";
const result8 = str8.replace(/,/g, ".");
console.log(result8); // "1.234.567.89"

const template = "Hello, {name}! Welcome to {place}.";
const result9 = template.replace(/{name}/, "Alice").replace(/{place}/, "Wonderland");
console.log(result9); // "Hello, Alice! Welcome to Wonderland."

这些示例展示了 replace 方法的多种用法，包括基本替换、使用正则表达式、使用函数作为替换值以及一些常见的实际应用场景。