JavaScript 字符串 matchAll() 方法

JavaScript matchAll() 语法

matchAll() 是 JavaScript 字符串的一个方法,它用于查找字符串中是否存在符合条件的子串。它会返回一个可迭代对象(RegExp String Iterator),该可迭代对象包含所有匹配项的信息。

语法:

str.matchAll(regexp)

说明:

matchAll() 方法接收单个参数。

  • regexp(必选):是一个正则表达式,必须带全局标志 “g” 。
    • 如果 regexp 没有 “g” 标志,则 matchAll() 会抛出 TypeError 错误。“g” 标志,则 matchAll() 会抛出 TypeError 错误。
    • 如果 regexp 是一个非 RegExp 对象,它会隐式地使用 new RegExp(regexp, "g") 将其转换为带有 “g” 标志的正则表达式。

matchAll() 方法非常适合在需要遍历所有匹配项,并且需要获取每个匹配项的详细信息(如捕获组、索引)时使用。

JavaScript matchAll() 摘要

属于 JavaScript 查找字符串
使用频率
修改原字符串
官方文档 查看
MDN 查看

JavaScript matchAll() 示例

接下来,我们通过几个简单的例子来讲解一下 JavaScript matchAll() 方法是如何使用的。

示例 1:matchAll() 参数是一个字符串

const str = "My favorite fruits are apple, banana and pear";
const result = str.matchAll("apple");

console.log(result);

运行结果如下。

Object [RegExp String Iterator] {}

分析:

当参数是一个字符串时,matchAll() 会将其转换为一个正则表达式对象(带 “g” 标志)。对于这个例子来说,str.matchAll("apple") 等价于 str.match(/apple/g)。

matchAll() 返回的是一个可迭代对象,我们可以使用 for...of 语句遍历它。

const str = "My favorite fruits are apple, banana and pear";
const result = str.matchAll("apple");

for (let item of result) {
    console.log(item);
}

运行结果如下。

[
  'apple',
  index: 23,
  input: 'My favorite fruits are apple, banana and pear',
  groups: undefined
]

示例 2:matchAll() 参数是一个正则表达式

const str = "My number is 020-666666 or 020-888888";
const result = str.matchAll(/\d{3}-\d{6}/g);

for (let item of result) {
    console.log(item);
}

运行结果如下。

[
  '020-666666',
  index: 13,
  input: 'My number is 020-666666 or 020-888888',
  groups: undefined
]
[
  '020-888888',
  index: 27,
  input: 'My number is 020-666666 or 020-888888',
  groups: undefined
]

分析:

当 matchAll() 参数是一个正则表达式时,必须结合 “g” 标志。如果不使用 “g” 标志,则会直接报错,小伙伴们可以自行试一下。

matchAll() 与 match() 的区别

matchAll() 和 match() 这两个方法都可以用于查找字符串中所有符合条件的子串,它们之间的区别如下。

  • 默认情况下,matchAll() 会返回所有匹配项,而 match() 只会返回第一个匹配项。
  • matchAll() 返回的是一个可迭代对象(Iterator),而 match() 返回的是一个数组。

上一篇: match()

下一篇: toUpperCase()

给站长反馈

绿叶网正在不断完善中,小伙伴们如果发现任何问题,还望多多给站长反馈,谢谢!

邮箱:lvyenet@vip.qq.com

「绿叶网」服务号
绿叶网服务号放大
关注服务号,微信也能看教程。
绿叶网服务号