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