如何在JavaScript中检查字符串是否匹配正则表达式？

在JavaScript中如果需要检查字符串是否匹配正则表达式，并且要捕获指定分组的匹配结果，我通常会写一个专门的函数来处理这种场景，下面是具体的实现方式和完整的交互示例：

这个函数通过循环调用regex.exec(string)来逐个获取所有匹配项，然后提取我们需要的分组内容：

function getMatches(string, regex, groupIndex) {
  let matches = [];
  let match;
  // 循环调用exec直到没有匹配结果
  while ((match = regex.exec(string)) !== null) {
    // 确保指定的分组存在
    if (match[groupIndex]) {
      matches.push(match[groupIndex]);
    }
  }
  // 返回所有捕获到的分组内容
  return matches;
}

函数说明： #

• string：要匹配的目标字符串
• regex：正则表达式对象，注意要加上g（全局匹配）标志，否则exec只会返回第一个匹配项
• groupIndex：要捕获的分组索引（分组从1开始计数，0是整个匹配的内容）

下面是一个包含交互按钮的示例，点击按钮后会执行正则匹配并展示结果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>正则匹配演示</title>
</head>
<body>
  <div>
    <label>目标字符串：</label>
    <input type="text" id="targetString" value="Hello 123 World 456 Test 789">
  </div>
  <div>
    <label>正则表达式（带g标志）：</label>
    <input type="text" id="regexPattern" value="\b(\d+)\b">
  </div>
  <div>
    <label>捕获分组索引：</label>
    <input type="number" id="groupIndex" value="1" min="1">
  </div>
  <button onclick="runMatch()">执行匹配</button>
  <div id="result"></div>

  <script>
    function getMatches(string, regex, groupIndex) {
      let matches = [];
      let match;
      while ((match = regex.exec(string)) !== null) {
        if (match[groupIndex]) {
          matches.push(match[groupIndex]);
        }
      }
      return matches;
    }

    function runMatch() {
      const string = document.getElementById('targetString').value;
      const pattern = document.getElementById('regexPattern').value;
      const groupIndex = parseInt(document.getElementById('groupIndex').value);
      
      try {
        const regex = new RegExp(pattern);
        const matches = getMatches(string, regex, groupIndex);
        document.getElementById('result').innerHTML = 
          `<strong>匹配结果：</strong>${matches.length > 0 ? matches.join(', ') : '无匹配内容'}`;
      } catch (e) {
        document.getElementById('result').innerHTML = `<strong>错误：</strong>${e.message}`;
      }
    }
  </script>
</body>
</html>

使用说明： #

1. 在输入框中填写目标字符串、带全局标志的正则表达式，以及要捕获的分组索引
2. 点击「执行匹配」按钮，页面会显示所有捕获到的分组内容，如果正则格式错误也会提示对应的错误信息

比如上面示例中的正则\b(\d+)\b会匹配字符串中的所有数字，分组1就是匹配到的数字，点击按钮后会输出123, 456, 789。

内容的提问来源于stack exchange，提问作者PvDev