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."