JavaScript 正则表达式 replace()

摘要：在本教程中，您将学习如何使用字符串 replace() 方法来返回一个新字符串，其中一些或所有与正则表达式匹配的项都被替换字符串替换。

JavaScript replace() 方法简介

String.prototype.replace() 方法同时适用于字符串和正则表达式。本教程将重点介绍正则表达式。

以下是 replace() 方法的语法

replace(regexp, newSubstr)

在此语法中

regexp 是一个要匹配的正则表达式。
newSubstr 是一个字符串，用于替换匹配项。如果 newSubstr 为空，则 replace() 方法将删除匹配项。

replace() 返回一个新字符串，其中匹配项被 newSubstr 替换。请注意，replace() 方法不会改变原始字符串，而是返回一个新字符串。

默认情况下，如果 regexp 不使用全局标志 (g)，则 replace() 方法将替换第一个匹配项。要替换所有匹配项，请在 regexp 中使用全局标志 (g)。

JavaScript 正则表达式 replace() 方法示例

让我们来看一些使用 replace() 方法的示例。

1) 一个简单的 JavaScript 正则表达式 replace() 方法示例

以下示例使用 replace() 方法将 JS 字符串的第一个匹配项替换为 JavaScript 字符串

const s = 'JS and js';
const re = /js/i;

const newS = s.replace(re, 'JavaScript');
console.log(newS);Code language: JavaScript (javascript)

输出

JavaScript and js

/js/i 在 'JS and js' 字符串中匹配 JS 和 js。但是，replace() 方法仅替换第一个匹配项 (JS)。

要替换所有匹配项，请在正则表达式中使用全局标志 (g)。

2) 使用全局标志的 JavaScript 正则表达式 replace() 方法

以下示例使用包含全局标志 (g) 的正则表达式，使用 replace() 方法替换所有匹配项

const s = 'JS and js';
const re = /js/gi;

const newS = s.replace(re, 'JavaScript');
console.log(newS);
Code language: JavaScript (javascript)

输出

JavaScript and JavaScript

3) 使用捕获组的 JavaScript 正则表达式 replace() 方法

当正则表达式包含捕获组时，您可以使用 $N 语法在 newSubstr 中引用这些组，其中 N 是分组编号。例如，$1 和 $2 分别引用第一和第二捕获组。

以下示例说明了如何使用 replace() 方法和捕获组来交换人名的姓和名

let re = /(\w+)\s(\w+)/;
let name = 'Jane Doe';
let lastFirst = name.replace(re, '$2, $1');

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

输出

Doe, Jane

工作原理。

正则表达式 /(\w+)\s(\w+)/ 匹配一个或多个单词字符、一个空格，然后是一个或多个单词字符。换句话说，它匹配任何包含一个词、一个空格和另一个词的字符串。

正则表达式包含两个捕获组。第一个捕获组捕获第一个词，第二个捕获组捕获空格后的第二个词。

在 newSubstr 中，我们使用 $1 来引用第一个捕获组，使用 $2 来引用第二个捕获组。要交换姓和名，我们将第二个匹配项 ($2) 放在第一个，然后是第一个匹配项 ($1)。

带有替换函数的 JavaScript 正则表达式 replace() 方法

replace() 方法的第二个参数可以是像这样的函数

replace(regexp, replacerFunction)

replace() 方法在找到第一个匹配项后调用 replacerFunction。replacerFunction 用于创建一个子字符串来替换匹配项。

如果 regexp 使用全局标志 (g)，则 replace() 方法将在每次匹配后调用 replacerFunction。

replacerFunction 具有以下参数

match 指定匹配的子字符串。
p1、p2、… regexp 中捕获组的值。
offset 是一个整数，指定匹配子字符串在输入字符串中的偏移量。
string 是输入字符串。
groups 是一个对象，其键是命名的捕获组，值是匹配的值。

让我们来看一个使用带有替换函数的 replace() 方法的示例。

假设您有一个像这样的字符串

backgroundColor

您想要将其转换为类似以下内容

background-color

为此，您可以使用带有替换函数的 replace() 方法。

首先，构造一个匹配大写字母的正则表达式

/[A-Z]/g

其次，定义一个替换函数

function replacer(match, offset) {
  return (offset > 0 ? '-' : '') + match.toLowerCase();
}Code language: JavaScript (javascript)

replacer() 函数如果匹配的字母不在字符串的开头，则添加一个连字符，并将连字符与转换为小写的匹配字母连接起来。

第三，使用 replace() 方法将匹配项替换为 replacer() 函数返回的子字符串

function addHyphen(prop) {
  return prop.replace(/[A-Z]/g, replacer);
}Code language: JavaScript (javascript)

以下显示了完整的代码

function replacer(match, offset) {
  return (offset > 0 ? '-' : '') + match.toLowerCase();
}

function addHyphen(prop) {
  return prop.replace(/[A-Z]/g, replacer);
}

const prop = 'backgroundColor';
console.log(addHyphen(prop));
Code language: JavaScript (javascript)

输出

background-color

为了使代码更简洁，您可以将带有替换函数的箭头函数用作回调函数，如下所示

const addHyphen = (prop) =>
  prop.replace(
    /[A-Z]/g,
    (match, offset) => (offset > 0 ? '-' : '') + match.toLowerCase()
  );

const prop = 'backgroundColor';
console.log(addHyphen(prop));
Code language: JavaScript (javascript)

总结

使用 replace() 方法查找与正则表达式匹配的项，并将匹配项替换为新的子字符串。

本教程对您有帮助吗？