javascript 正则表达式复杂分组

封面图 • 2025-11-08 • JavaScript

在 JavaScript 中，正则表达式（Regular Expression）支持**复杂分组**，这可以通过使用 **捕获组（capture groups）** 和 **非捕获组（non-capturing groups）** 来实现。这些功能可以帮助你更精确地匹配和提取文本内容。

---

## 一、基本概念

### 1. 捕获组（Capture Groups）

使用 `()` 包裹的子表达式称为**捕获组**，它可以提取匹配的内容。

```javascript
const str = "Hello, world!";
const regex = /(\w+), (\w+)/;
const match = str.match(regex);

console.log(match[0]); // "Hello, world"
console.log(match[1]); // "Hello"
console.log(match[2]); // "world"
```

### 2. 非捕获组（Non-capturing Groups）

使用 `(?:...)` 包裹的子表达式是**非捕获组**，它只用于分组，不会被单独提取出来。

```javascript
const str = "Hello, world!";
const regex = /(?:\w+), (\w+)/;
const match = str.match(regex);

console.log(match[0]); // "Hello, world"
console.log(match[1]); // "world"
```

---

## 二、复杂分组示例

### 示例 1：提取 URL 的协议、域名和路径

```javascript
const url = "https://www.example.com/path/to/page?query=1";
const regex = /^(https?):\/\/([^\/?#]+)([^\?#]*)\??([^#]*)#?(.*)$/;

const match = url.match(regex);

console.log("Protocol:", match[1]);     // "https"
console.log("Domain:", match[2]);      // "www.example.com"
console.log("Path:", match[3]);        // "/path/to/page"
console.log("Query:", match[4]);       // "query=1"
console.log("Hash:", match[5]);        // ""
```

### 示例 2：解析 HTML 标签

```javascript
const html = "<div class='example'>Hello</div>";
const regex = /<([a-z]+)\s+[^>]*class=['"]([^'"]+)['"][^>]*>(.*?)<\/\1>/i;

const match = html.match(regex);

console.log("Tag:", match[1]);    // "div"
console.log("Class:", match[2]);  // "example"
console.log("Content:", match[3]); // "Hello"
```

> 注意：上面的正则可能不适用于所有 HTML，因为 HTML 是结构复杂的语言，建议用 DOM 解析器处理。

---

## 三、高级技巧

### 1. 嵌套分组

```javascript
const str = "abc123def456";
const regex = /((a|b)c)((d|e)f)/;
const match = str.match(regex);

console.log(match[0]);   // "abc123def"
console.log(match[1]);   // "abc"
console.log(match[2]);   // "a"
console.log(match[3]);   // "def"
console.log(match[4]);   // "d"
```

### 2. 使用反向引用（Backreference）

```javascript
const str = "abba";
const regex = /(.)\1/; // 匹配两个相同的字符
console.log(str.match(regex)); // ["bb"]
```

### 3. 使用命名捕获组（ES6 支持）

```javascript
const str = "John Doe";
const regex =/(?<first>\w+)\s+(?<last>\w+)/;
const match = str.match(regex);

console.log(match.groups.first); // "John"
console.log(match.groups.last);  // "Doe"
```

---

## 四、常见应用场景

- 提取 URL 参数
- 解析日志文件
- 验证复杂格式（如邮箱、电话号码）
- 数据清洗与提取

---

## 五、注意事项

- 正则表达式不能完全替代 HTML 或 JSON 解析器。
- 复杂的正则可能导致性能问题或难以维护。
- 使用 `test()`、`match()`、`replace()` 等方法时注意返回值类型。

---

如果你有具体的场景或需要匹配的字符串结构，我可以帮你写出更精确的正则表达式。欢迎继续提问！

javascript 正则表达式 复杂分组

javascript 正则表达式复杂分组