JS正则表达式获取分组内容的方法详解

正则表达式在JavaScript中的使用非常广泛，它既可以用于匹配字符串，也可以用于提取字符串中的某些部分。在很多情况下，我们需要从一个字符串中获取指定的内容，而这些内容可能位于字符串的某个位置，有时也需要将它们按照一定的规则进行分组。在这篇文章中，我们将会详细讲解如何使用正则表达式来获取分组内容。

普通分组

普通分组是指我们需要在正则表达式中使用一个或多个圆括号将需要匹配的部分括起来，以便后面可以使用$1、$2等特殊符号来获取匹配到的内容。

例如，接下来的代码段中的正则表达式包含一个普通的分组，它可以匹配类似于“abc123”这样的字符串，并将其中的字母和数字分别放在两个分组中：

var str = "abc123";
var reg = /^([a-z]+)(\d+)$/i;
var match = reg.exec(str);
console.log(match[0]); // 匹配到的完整字符串，即"abc123"
console.log(match[1]); // 第一个分组，即"a bc"
console.log(match[2]); // 第二个分组，即"123"

在上面的例子中，我们使用了^和$这两个元字符将整个正则表达式限定在了字符串的起始和结尾，以确保我们只会匹配到“abc123”这个完整的字符串。同时，在表达式的中间部分，我们使用了两个圆括号将正则表达式分成了两个部分，即[a-z]+和\d+。这两个部分分别对字母和数字进行了匹配，并将匹配到的内容放在了相应的分组中。

最后，在正则表达式匹配到字符串之后，我们可以使用exec方法获得匹配对象，该对象的若干属性对应了匹配到的内容和分组。

命名分组

除了普通分组之外，还可以使用命名分组来对正则表达式进行分组，以便更加灵活地获取匹配到的内容。命名分组的语法如下所示：

?(<name>...)

其中，name 表示该分组的名称，可以是任意有效的 JavaScript 标识符。...表示分组中需要匹配的内容，可以是一个正则表达式或多个正则表达式组合而成。

例如，接下来的代码段中的正则表达式包含一个命名的分组，它可以匹配类似于“John Doe ([email][e-mail][/email])”这样的字符串，并将其中的姓名和电子邮件地址放在了相应的分组中：

var str = "John Doe ([e-mail])";
var reg = /^(?<name>[a-z]+\s[a-z]+)\s+\((?<email>[^\s\)]+)\)$/i;
var match = reg.exec(str);
console.log(match[1]); // 姓名，即"John Doe"
console.log(match[2]); // 电子邮件地址，即"[e-mail]"

在上面的例子中，我们使用了一对?()符号来表示一个命名的分组，其中name表示该分组的名称，[a-z]+\s[a-z]+表示匹配一个或多个字母和一个或多个空格，[^\s)]+表示匹配一个或多个非空白字符和一个右括号。最后，我们使用exec方法获取匹配对象，并通过相应的属性来获取匹配到的内容。

示例一：提取URL中的域名

接下来，我们将使用一个示例来演示如何使用正则表达式提取URL中的域名：

var url = "https://www.baidu.com/index.html";
var reg = /^https?:\/\/(?<domain>[^\/]+)\//i;
var match = reg.exec(url);
console.log(match[1]); // "www.baidu.com"

在上面的代码中，我们定义了一个名为domain的命名分组，它匹配了URL中的域名部分。具体来说，我们使用了^和$来限定正则表达式只能匹配以“https://”或“http://”开头的URL，然后使用了?()符号来定义一个名为domain的命名分组，该分组将匹配URL中“//”和“/”之间的部分，也就是域名部分。最后，我们使用exec方法获取匹配对象，并通过名称为domain的属性来获取命名分组中匹配到的内容。因此，该示例可以成功提取出“www.baidu.com”作为域名。

示例二：提取HTML中的img标签

接下来，我们将使用另一个示例来演示如何使用正则表达式提取HTML中的img标签：

var html = '<div> <img src="https://www.baidu.com/img/bd_logo1.png" width="270" height="129" /></div>';
var reg = /<img\s+[^>]*?src="(?<src>[^">]+)"/i;
var match = reg.exec(html);
console.log(match[1]); // "https://www.baidu.com/img/bd_logo1.png"

在上面的代码中，我们定义了一个名为src的命名分组，它匹配了HTML代码中的img标签中的src属性。具体来说，我们使用了]?src="[^">]+"这样一个表达式来匹配HTML中的img标签，其中]?表示匹配img标签中的其他部分（但是不匹配属性部分），src="[^">]+"表示匹配img标签中的src属性及其值。最后，我们使用exec方法获取匹配对象，并通过名称为src的属性来获取命名分组中匹配到的内容。因此，该示例可以成功提取出img标签中的src属性，即图像的URL。