原文:JavaScript replaceAll() – Replace All Instances of a String in JS,作者:Dionysia Lemonaki
在 JavaScript 程序中,你可能需要将一个字符或单词替换为另一个字符或单词。
具体来说,你可能需要用其他东西替换该字符或单词的所有实例,而不只是一个。
在 JavaScript 中有几种方法可以实现这一点。
其中一种方法是使用内置的 replaceAll()
方法,你将在本文中学习使用该方法。
以下是我们将介绍的内容:
- JavaScript 中的
replaceAll()
是什么 replaceAll()
语法replaceAll()
以字符串作为第一个参数replaceAll()
以正则表达式作为第一个参数replaceAll()
VSreplace()
JavaScript 中的 replaceAll() 是什么
replaceAll()
方法是 JavaScript 标准库的一部分。当你使用它时,你替换了一个字符串的所有实例。
有多种方法可以替换字符串的所有实例,但使用 replaceAll()
是最直接和最快的方法。
需要注意的是,此功能是在 ES2021 中引入的。
虽然 replaceAll()
方法兼容所有主流浏览器,但在针对旧版本浏览器进行开发时,它并不是最好的解决方案,因为这些旧版本可能无法理解和支持它。
replaceAll() 方法——语法分解
replaceAll()
方法的一般语法如下所示:
string.replaceAll(pattern, replacement)
让我们分解一下:
string
是你正在使用的原始字符串,也是你将调用replaceAll()
方法的字符串replaceAll()
方法有 2 个参数:pattern
是第一个参数,可以是子字符串或正则表达式——这指的是你要更改并替换为其他内容的项目- 如果
pattern
是正则表达式,则需要包含g
标志(其中g
代表全局),否则replaceAll()
将引发异常——具体而言,错误将是TypeError
- 第二个参数
replacement
,可以是另一个字符串,也可以是替换pattern
的函数
这里需要注意的是 replaceAll()
方法不会更改原始字符串。相反,它返回一个新副本。
指定 pattern
的所有实例将被 replacement
替换。
如何使用第一个参数是字符串的 replaceAll()
之前,你看到 replaceAll()
方法接受两个参数——pattern
作为第一个参数,replacement
作为第二个参数。
你还看到该 pattern
可以是字符串或正则表达式。
现在,让我们看看 replaceAll()
将字符串作为第一个参数时如何运行。
假设你有以下示例:
const my_string = "I like dogs because dogs are adorable!";
let pattern = "dogs";
let replacement = "cats";
let my_new_string = my_string.replaceAll(pattern,replacement);
我存储文本 I like dogs because dogs are adorable!
在名为 my_string
的变量中。
这是我正在使用的原始字符串,我想修改它的一些内容。
具体来说,我想更改在原始字符串中出现两次的子字符串 dogs
——这将是我的 pattern
。
我将这个我想用其他东西替换的子字符串存储在一个名为 pattern
的变量中。
然后我将字符串 cats
存储在一个名为 replacement
的变量中——这是将替换 dogs
的字符串。
然后我对原始字符串调用 replaceAll()
方法,将两个子字符串作为参数传递,并将结果存储在名为 my_new_string
的变量中。
console.log(my_new_string);
// I like cats because cats are adorable!
replaceAll()
方法将用 cats
替换字符串 I like dogs because dogs are adorable!
中的子字符串 dogs
的所有实例。
原始字符串将保持不变。
这里需要注意的是,使用字符串作为第一个参数时的替换是区分大小写的。这意味着只有与 pattern
匹配的大小写相同的字符串才会被替换。
const my_string = "I like Dogs because dogs are adorable!";
let pattern = "dogs";
let replacement = "cats";
let my_new_string = my_string.replaceAll(pattern,replacement);
console.log(my_new_string);
在上面的示例中,有两个 dogs
的实例,但第一个具有大写字母 D
。
从输出中可以看出,替换是区分大小写的:
I like Dogs because cats are adorable!
如何使用第一个参数是正则表达式的 replaceAll()
正如你之前看到的,你可以传递一个正则表达式(也称为 regex)作为第一个参数。
正则表达式是创建搜索模式的字符序列。
执行此操作的一般语法类似于以下内容:
string.replaceAll(/pattern/g, replacement)
让我们以上一节中的示例为例,不是使用字符串,而是使用正则表达式作为第一个参数:
const my_string = "I like dogs because dogs are adorable!";
let pattern = /dogs/g;
let replacement = "cats";
let my_new_string = my_string.replaceAll(pattern,replacement);
console.log(my_new_string);
//output
// I like cats because cats are adorable!
当使用正则表达式作为第一个参数时,请确保使用 g
标志。
如果你不这样做,你最终会在代码中得到一个错误:
const my_string = "I like dogs because dogs are adorable!";
let pattern = /dogs/;
let replacement = "cats";
let my_new_string = my_string.replaceAll(pattern,replacement);
console.log(my_new_string);
// output
// test.js:6 Uncaught TypeError: String.prototype.replaceAll called with a // non-global RegExp argument
// at String.replaceAll (<anonymous>)
// at test.js:6:31
让我们稍微调整一下原始字符串。
const my_string = "I like Dogs because dogs are adorable!";
let pattern = /dogs/g;
let replacement = "cats";
let my_new_string = my_string.replaceAll(pattern,replacement);
console.log(my_new_string);
我现在有两个 dogs
的实例,但其中一个是大写的 D
。
我最终得到以下输出:
I like Dogs because cats are adorable!
从该输出中,你可以看出替换是区分大小写的。
要使其不区分大小写,请确保在 g
标志之后添加 i
标志,如下所示:
const my_string = "I like Dogs because dogs are adorable!";
let pattern = /dogs/gi;
let replacement = "cats";
let my_new_string = my_string.replaceAll(pattern,replacement);
console.log(my_new_string);
// output
// I like cats because cats are adorable!
正则表达式 /dogs/gi
将匹配包含该子字符串的所有实例,并使替换不区分大小写。
replaceAll() 与 replace() 方法有什么区别
replaceAll()
和 replace()
方法之间的区别在于 replaceAll()
直接执行全局替换。
replaceAll()
方法将替换你指定的字符串或正则表达式模式的所有实例,而 replace()
方法将仅替换第一次出现的实例。
这是 replace()
使用字符串作为第一个参数的运行方式:
const my_string = "I like dogs because dogs are adorable!";
let pattern = "dogs";
let replacement = "cats";
let my_new_string = my_string.replace(pattern,replacement);
console.log(my_new_string);
// output
// I like cats because dogs are adorable!
这是 replace()
使用正则表达式作为第一个参数的运行方式:
const my_string = "I like dogs because dogs are adorable!";
let pattern = /dogs/;
let replacement = "cats";
let my_new_string = my_string.replace(pattern,replacement);
console.log(my_new_string);
// output
// I like cats because dogs are adorable!
使用 replace()
方法执行全局替换的唯一方法是使用带有 g
标志的正则表达式:
const my_string = "I like dogs because dogs are adorable!";
let pattern = /dogs/g;
let replacement = "cats";
let my_new_string = my_string.replace(pattern,replacement);
console.log(my_new_string);
// output
// I like cats because cats are adorable!
小结
你现在知道了 replaceAll()
方法的工作原理以及可以操作它的一些方法。
要了解有关 JavaScript 的更多信息,请查看 freeCodeCamp 的 JavaScript 算法和数据结构认证。
你将从基础开始,学习对初学者友好的交互式课程。你还将构建五个项目以加强对所学概念的理解。
感谢你阅读本文,祝你编码愉快!