使用 JavaScript 替换字符串中的多个字符

作者

替换字符串中的多个字符

Replace Multiple Characters in a String using JavaScript

使用该replace()方法替换字符串中的多个字符，例如
str.replace(/[._-]/g, ' ').

该方法采用的第一个参数是可以匹配多个字符的正则表达式。

该方法返回一个新字符串，其中匹配项被提供的替换项替换。

索引.js
const str = 'one.two_three-four';

const result = str.replace(/[._-]/g, ' ');
console.log(result); // 👉️ "one two three four"

String.replace
()
方法返回一个新字符串，其中一个、一些或所有正则表达式的匹配项被替换为提供的替换项。

该方法采用以下参数：

姓名 描述
图案 要在字符串中查找的模式。可以是字符串或正则表达式。
替代品 用于通过提供的模式替换子字符串匹配的字符串。

我们传递给该方法的第一个参数replace()是一个正则表达式。

正斜杠标记/ /正则表达式的开始和结束。

方括号[]称为字符类，匹配方括号之间的任何字符。
索引.js
const str = 'one.two_three-four';

const result = str.replace(/[._-]/g, ' ');
console.log(result); // 👉️ "one two three four"

在第一个示例中，我们匹配一个点、一个下划线和一个连字符。

您可以根据您的用例通过更新方括号和替换字符串之间的字符来调整正则表达式。

下面是一个用下划线替换空格、问号和点的示例。

索引.js
const str = 'one two?three.four';

const result = str.replace(/[\s?\.]/g, '_');
console.log(result); // 👉️ "one_two_three_four"
我们使用g(global) 标志是因为我们想要匹配字符串中所有出现的这些字符，而不仅仅是第一次出现的字符。

该String.replace()方法返回一个新字符串，其中替换了模式的匹配项。该方法不会更改原始字符串。

字符串在 JavaScript 中是不可变的。

使用 replaceAll 替换字符串中的多个字符

或者，您可以String.replaceAll()通过链接多个调用来使用该方法。

索引.js
const str = 'one.two_three-four';

const result = str
  .replaceAll('.', '?')
  .replaceAll('_', '?')
  .replaceAll('-', '?');

console.log(result); // 👉️ "one?two?three?four"

String.replaceAll ()
方法返回一个新字符串，其中所有匹配的模式都被提供的替换项替换。

该方法采用以下参数：

姓名 描述
图案 要在字符串中查找的模式。可以是字符串或正则表达式。
替代品 用于通过提供的模式替换子字符串匹配的字符串。

您可以链接对这些replaceAll()方法的多次调用，因为该方法返回字符串。

这种方法比使用带有字符类的正则表达式要冗长一点。

但是，如果我们想要替换特定字符，它允许我们避免使用正则表达式。

性能上的差异很可能可以忽略不计，除非您使用的是数万个字符长的字符串。

|使用管道字符替换字符串中的多个字符

您可能会看到的另一种方法是使用管道|字符，它用作正or则表达式中的一个。

下面是一个将每个空格、下划线或感叹号替换为问号的示例。

索引.js
const str = 'one two_three!four';
const result = str.replace(/\s|_|!/g, '?');

console.log(result); // 👉️ "one?two?three?four"

特殊\s字符匹配空格、制表符和换行符。

The pipe | allows us to match either one of the characters in the regex.

Which approach you pick is a matter of personal preference.

I’d go with using a character class [] with the replace() method if the team
I’m on is comfortable using regular expressions.

Otherwise, I’d probably chain calls to the replaceAll() method.

# Additional Resources

You can learn more about the related topics by checking out the following
tutorials: