在前后端数据清洗、爬虫或富文本处理场景中，我们常常拿到一段HTML字符串，需要从中把带有src属性的标签地址全部提取出来。如果只用简单文本处理，很容易因为HTML写法多样而漏匹配或误匹配。
为什么不直接用正则
正则表达式写起来快，但HTML不是正则能完美描述的语言。比如下面几种写法，正则都要额外适配：
- 单引号双引号混用：<img src='a.png'> 与 <img src="a.png">
- 属性顺序不定：<img class="x" src="b.png">
- 大小写混合：<IMG SRC="c.png">
因此更推荐用真正的HTML解析方式。
浏览器端：使用DOMParser
在浏览器环境中，可以把字符串交给DOMParser，然后像操作页面一样查标签。
// 假设 htmlStr 是一段包含多个标签的HTML字符串
const htmlStr = '<div><img src="a.png"><script src="b.js"></script></div>';
// 将字符串解析为document对象
const doc = new DOMParser().parseFromString(htmlStr, 'text/html');
// 选取所有带src属性的常见标签
const tags = doc.querySelectorAll('img, script, iframe, audio, video, source');
const srcList = [];
tags.forEach(tag => {
const src = tag.getAttribute('src');
if (src) {
srcList.push(src);
}
});
console.log(srcList); // ["a.png", "b.js"]
Node.js端：使用cheerio
在服务端没有DOM时，可以用cheerio库来加载HTML并提取。
// 先安装：npm install cheerio
const cheerio = require('cheerio');
const htmlStr = '<div><img src="a.png"><iframe src="c.html"></iframe></div>';
const $ = cheerio.load(htmlStr);
const srcList = [];
$('img, iframe, script, video, audio, source').each((i, el) => {
const src = $(el).attr('src');
if (src) {
srcList.push(src);
}
});
console.log(srcList); // ["a.png", "c.html"]
对比与建议
| 方式 | 适用环境 | 稳定性 |
|---|---|---|
| 正则匹配 | 简单固定格式 | 低 |
| DOMParser | 浏览器 | 高 |
| cheerio | Node.js | 高 |
如果必须处理不可控的外部HTML，优先使用解析型方案，避免自己写正则造成维护负担。
小结
从HTML字符串提取src属性，核心思路是先解析再查询，而不是盲目匹配文本。掌握DOMParser与cheerio，基本可以覆盖绝大多数开发需求。
HTML解析正则表达式src_attribute修改时间：2026-07-29 06:15:17