JS正则子匹配实例分析

2023年6月10日下午5:16 • JavaScript

JS正则表达式是一种强大的工具，它可以帮助程序员通过一定的规则来匹配和查找字符串中的特定字符，从而实现很多功能。而子匹配（也叫捕获组）是正则表达式的一个重要特性，它是指在正则表达式中使用括号包围某些字符，以便在匹配成功时可以获取这些字符。

下面我们将通过两个示例来演示JS正则子匹配的使用方法：

示例1：提取URL字符串中的文件名和后缀名

我们有一个URL字符串，格式如下：

const url = 'http://www.example.com/path/to/file/demo.js';

现在我们需要从这个URL字符串中提取文件名“demo”和后缀名“js”。我们可以使用正则表达式和子匹配来实现：

const pattern = /\/([\w-]+)\.([\w-]+)$/;
const result = url.match(pattern);

if(result){
  const fileName = result[1];
  const fileType = result[2];
  console.log(`文件名：${fileName}，文件类型：${fileType}`);
}

上面的代码中，正则表达式的模式是/\/([\w-]+)\.([\w-]+)$/，其中：

\/ 表示匹配斜杠字符“/”；
([\w-]+) 表示匹配一个或多个字母、数字、下划线或横线字符；
\. 表示匹配一个点号“.”，由于点号是正则表达式的特殊字符，所以需要加上反斜杠转义；
([\w-]+) 表示匹配另一个由字母、数字、下划线或横线组成的字符串；
$ 表示匹配字符串结尾。

最终的结果是通过match方法匹配到的数组result，数组的第一个元素是匹配整个正则表达式的字符串，第二个元素是第一个捕获组匹配的字符串，第三个元素是第二个捕获组匹配的字符串，以此类推。在本例子中，result[1]是文件名，result[2]是文件类型。这样我们就可以通过这两个变量来操作提取出来的数据了。

示例2：验证邮件地址的格式

我们有一个表单，其中一个字段是邮件地址，我们需要使用正则表达式来验证这个邮件地址是否合法。合法的邮件地址应该满足以下条件：

必须包含@符号；
@符号前面的部分可以是字母、数字、下划线、横线、点号等字符；
@符号后面的部分必须包含点号，并且点号后面必须是两个至四个字母。

下面的代码就可以实现这个功能：

const emailInput = document.querySelector('#email');
const submitBtn = document.querySelector('#submit');

submitBtn.addEventListener('click', function() {
  const emailValue = emailInput.value;
  const pattern = /^([\w-\.]+)@([\w-]+\.)+([\w]{2,4})$/;

  if(pattern.test(emailValue)){
    console.log('邮件地址格式正确！');
  }else{
    console.log('邮件地址格式不正确！');
  }
});

上面的代码中，我们使用了正则表达式/^([\w-\.]+)@([\w-]+\.)+([\w]{2,4})$/，其中：