正则表达式是一种强大的文本处理工具，它能够帮助我们快速定位、匹配和提取文本中的特定模式。在网页开发中，匹配HTML中的img标签是一个常见的任务。本文将详细介绍如何使用正则表达式来匹配所有img标签，并提取其src属性。
第一部分：正则表达式基础
1. 什么是正则表达式？
正则表达式是一种描述字符串模式的语言。它允许你定义一个模式，然后用这个模式来匹配、查找、替换或验证字符串。正则表达式通常用于文本处理任务，如搜索和替换文本中的特定模式。
2. 正则表达式的组成
正则表达式由字符和符号组成，以下是一些常见的元字符：
- 点号（.）：匹配除换行符之外的任何单字符。
- 星号（*）：匹配前面的子表达式零次或多次。
- 加号（+）：匹配前面的子表达式一次或多次。
- 问号（?）：匹配前面的子表达式零次或一次。
- 花括号（{}）：指定匹配次数。
- 方括号（[]）：匹配括号内的任意一个字符。
- 脱字符（^）：匹配字符串的开始位置。
- 美元符号（$）：匹配字符串的结束位置。
第二部分：匹配img标签
要匹配HTML中的img标签，我们需要编写一个能够识别标签并提取其src属性的正则表达式。
以下是一个示例：
<img[^>]*src="([^"]+)"
这个正则表达式的含义如下：
<img：匹配字符串的开始部分。[^>]*：匹配任何非尖括号字符零次或多次。src="：匹配src属性的开始部分。([^"]+)：匹配一个或多个非引号字符，并将其捕获为一个组。"：匹配引号字符，结束src属性的值。
第三部分：提取src属性
为了提取匹配的img标签的src属性，我们可以使用以下JavaScript代码：
const htmlString = '...'; // 你的HTML字符串
const regex = /<img[^>]*src="([^"]+)"/g;
let match;
let srcList = [];
while ((match = regex.exec(htmlString)) !== null) {
srcList.push(match[1]);
}
console.log(srcList); // 输出所有匹配的src属性值
这个代码使用了正则表达式的全局匹配标志g，以便匹配HTML字符串中所有的img标签。