JavaScript 字符串 replace() 方法详解

摘要: 本教程将向您展示如何使用 JavaScript 字符串 replace() 方法将字符串中的子字符串替换为新的子字符串。

JavaScript 字符串 replace() 方法介绍

以下是 replace() 方法的语法

let newStr = str.replace(substr, newSubstr);Code language: JavaScript (javascript)

JavaScript 字符串 replace() 方法返回一个新的字符串，其中子字符串 (substr) 被新的子字符串 (newSubstr) 替换。

请注意，replace() 方法不会更改原始字符串。它返回一个新的字符串。

JavaScript 字符串 replace() 示例

以下示例使用 replace() 将字符串 'JS will, JS will rock you' 中的 JS 替换为新的子字符串 JavaScript

let str = 'JS will, JS will rock you!';
let newStr = str.replace('JS','JavaScript');

console.log(newStr);Code language: JavaScript (javascript)

输出

JavaScript will, JS will rock you!Code language: JavaScript (javascript)

从输出中可以看出，只有子字符串 JS 的第一次出现被替换为新的子字符串 JavaScript。

要将字符串中子字符串的所有出现替换为新的子字符串，您必须使用正则表达式。

使用正则表达式

replace() 方法完全支持正则表达式

let newStr = str.replace(regexp, newSubstr);Code language: JavaScript (javascript)

在此语法中，replace() 方法在 str 中查找所有匹配项，将它们替换为 newSubstr，并返回一个新的字符串 (newStr)。

以下示例使用全局标志 (g) 将 str 中所有出现的 JS 替换为 JavaScript

let str = 'JS will, JS will rock you!';
let newStr = str.replace(/JS/g,'JavaScript');

console.log(newStr);
Code language: JavaScript (javascript)

输出

JavaScript will, JavaScript will rock you!Code language: JavaScript (javascript)

如果要忽略搜索和替换的大小写，可以在正则表达式中使用忽略标志 (i)，如下所示

let str = 'JS will, Js will rock you!';
let newStr = str.replace(/JS/gi,'JavaScript');

console.log(newStr);Code language: JavaScript (javascript)

输出

JavaScript will, JavaScript will rock you!Code language: JavaScript (javascript)

使用替换函数

您可以传递一个替换函数，而不是将 newSubstr 传递给 replace() 方法的第二个参数，如下所示

let newStr = str.replace(substr | regexp, replacer);Code language: JavaScript (javascript)

在此语法中，replace() 方法将在执行匹配后调用 replacer 函数。然后它使用此函数的结果作为替换字符串。

如果您在正则表达式中使用全局标志 (g)，replace() 方法将为每次匹配调用 replacer 函数。例如，如果有三个匹配项，replace() 方法将调用 replacer() 函数三次。

replacer() 函数具有以下语法

function replacer(match, p1, p2, ..., offset, string);Code language: JavaScript (javascript)

以下是每个参数的含义

match: 是匹配的子字符串。
p1、p2、…pn 是正则表达式提供的带括号的捕获组找到的第 n 个字符串。
offset: 是匹配的子字符串在整个搜索字符串中的偏移量。
string: 是正在检查的整个字符串。

以下示例使用 replace() 函数将子字符串 apples 和 bananas 更改为大写。它将一个 replacer 函数传递到 replace() 函数中

let str = "I like to eat, eat, eat apples and bananas";
let re = /apples|bananas/gi;

let newStr = str.replace(re, (match) => { 
    console.log({match}); 
    return match.toUpperCase();
});

console.log(newStr);Code language: JavaScript (javascript)

输出

{match: "apples"}
{match: "bananas"}
I like to eat, eat, eat APPLES and BANANAS
Code language: JavaScript (javascript)

总结

使用 replace() 方法返回一个新的字符串，其中子字符串被新的子字符串替换。
使用带全局标志 (g) 的正则表达式将子字符串的所有出现替换为新的子字符串。

本教程是否有帮助？