如何在 JavaScript 正则表达式中访问匹配的组?

front end technologyjavascriptweb development

本教程将教我们如何在 JavaScript 正则表达式中访问匹配的组。正则表达式是字符序列,也称为 RegEx,它对于在字符串中匹配特定模式很有用。

字符串中的特定模式可以有多个匹配项。为了获取所有匹配项的出现,我们在本教程中解释了以下不同的方法。

我们还将在本文中看到正则表达式的各种用法。

创建正则表达式时使用‘g’标志

当我们在正则表达式中添加‘g’作为修饰符时,它会在给定的字符串中搜索正则表达式模式的所有出现并返回可迭代对象。我们可以遍历对象并将其转换为数组以访问所有匹配的组。

语法

用户可以使用以下语法在正则表达式中使用 ‘g’ 修饰符。

let str = "digit 01, 39 digits";
let regexp = /[0-9]/g;
let group = str.match(regexp);
for (const element of group) {
   index.innerHTML += element + '<br/>';
}

在上述语法中,组是可迭代对象,但它不是数组。因此,我们无法直接从对象访问任何元素。我们可以将其转换为数组,也可以迭代对象并访问每个元素。在这里,我们使用 for 循环迭代对象并访问所有元素。

示例

在此示例中,我们创建了基本正则表达式来查找 0 到 9 之间的所有数字。我们使用 ‘g’ 作为修饰符来查找所有元素,它从字符串中返回 0 到 9 之间的所有元素。如果任何数字出现多次,它将返回多次。

我们使用 match() 方法来匹配模式的所有出现,但用户也可以使用 matchAll() 方法。

<html>
<head>
   <title> Example - Access all the matched groups in Regular expression.
</title>
</head>
<body>
   <h4> All matching digits between 0 to 9 using 'g' flag </h4>
   <div id="index"> </div>
   <script>
      let index = document.getElementById("index");
      const str = "digit 01, 39 digits";
      const regexp = /[0-9]/g;
      const group = str.match(regexp);
      for (const element of group) {
         index.innerHTML += element + '<br/>';
      }
   </script>
</body>
</html>

在上面的输出中,用户可以看到它从给定的字符串中返回 0 到 9 之间的所有元素。

访问命名组

在本节中,我们将在正则表达式中创建一个组并为其赋予一个唯一的名称。这样很容易检查特定组的模式是否在字符串中。此外,我们可以获取特定组的所有模式。

语法

用户可以按照以下语法在正则表达式中创建组。

?<group_name> // 在正则表达式中添加组。
/(?<group1>[0-2]{2})/gi

在上述语法中,用户可以看到我们创建了名为 group1 的组,其中包含 0 到 2 之间的数字,长度为 2。

示例

以下示例演示了如何在正则表达式中创建组。我们可以使用可迭代对象访问匹配出现的组。

<html>
<head>
   <title>示例 - 使用正则表达式访问所有匹配的组。
</title>
</head>
<body>
   <h4> 使用正则表达式访问命名组。</h4>
   <div id="index"> </div>
   <script>
      let index = document.getElementById("index");
      const str = "a-1 b-12 c-32 d-40";

      // 正则表达式查找长度为 2 位的元素的所有出现位置。
      let regexp = /(?<name>[a-z])-(?<total>[0-9]{2})/gi;
      const group = str.matchAll(regexp);

      // 从组中获取所有值
      for (const element of group) {
           let {
            name,
            total
         } = element.groups;
         index.innerHTML += "name is " + name + ". total number of " + name + " is " + total + '. <br/>';
      }
   </script>
</body>
</html>

结论

在本教程中,我们学习了如何访问正则表达式中出现的所有匹配项。在第一部分中,我们必须使用 match() 方法来查找匹配项,并使用 ‘g’标志以获取所有组。

在第二部分中,我们在正则表达式中创建了组。之后,我们匹配这些组。对于每个匹配,我们都可以获取组的值,如示例中所示。


相关文章