本文详解如何用正则表达式准确提取 HTML 中 `style` 属性值，确保引号类型严格配对（如 `"..."` 或 `'...'`），并对比推荐更健壮的 DOMParser 解析方案。
在 HTML 字符串解析中，若需提取 style 属性的完整值（例如 style="color:red;font-family:'Arial'"），关键挑战在于：引号必须成对且类型一致——即以双引号开头就必须以双引号结尾，单引号同理。原始正则 /style\s*=\s*(?:'|").+?(?:'|")/gmi 存在严重缺陷：它会错误跨引号边界匹配（如将 "font-family:'Times New Roman';" 中的 " 与后续未闭合的 " 混淆），导致截断或越界捕获。
✅ 正确方案一：使用反向引用（Backreference）实现引号配对
核心思路是捕获起始引号（(["'])），再通过 \1 精确匹配相同类型的结束引号：
const regXStyleAttr = /style\s*=\s*(["']).*?\1/gi;
- (["'])：捕获组 1，匹配 ", ' 中的任意一个，并保存为引用；
- .*?：非贪婪匹配任意内容（含嵌套相反引号，如 'font-family:"Arial"'）；
- \1：强制要求结尾引号与开头完全一致，杜绝混用。
✅ 示例验证：
立即学习“前端免费学习笔记（深入）”；
const markup = ` foo bar `; console.log(markup.match(regXStyleAttr)); // → [ // 'style="font-size:0.58em;font-family:\'Times New Roman\';"', // "style='font-size:0.58em;font-family:\"Times New Roman\";'" // ]
⚠️ 注意事项：
- 此正则不校验 HTML 语法合法性（如缺失 >、标签未闭合等），仅适用于结构基本合规的字符串；
- 若属性值中存在未转义的反斜杠（如 style="content:\"text\";"），需额外处理转义逻辑；
- 在极复杂场景（如注释、CDATA、JS 内联代码干扰）下仍可能误匹配。
✅ 正确方案二（推荐）：使用 DOMParser 进行语义化解析
正则本质是文本模式匹配，而 HTML 是树状结构。浏览器原生的 DOMParser 能真实模拟 HTML 解析器行为，自动容错、修复、标准化，鲁棒性远超正则：
function extractStyleAttrs(htmlString) {
const doc = new DOMParser().parseFromString(htmlString, 'text/html');
return Array.from(doc.body.querySelectorAll('[style]'))
.map(el => `style="${el.style.cssText}"`);
}
// 支持各类边缘情况：
extractStyleAttrs(`test`);
// → ['style="color: red; font-size: 12px;"'] （自动补全单位、标准化空格）
extractStyleAttrs(`ab`);
// → ['style="font-family: "Arial";"', 'style="color: 'blue';"']? 性能与兼容性说明：
- ✅ 性能足够好：现代浏览器中，DOMParser 解析数万字符 HTML 通常耗时
- ✅ 容错性强：可正确处理无引号属性（style=...）、换行、多余空格、甚至部分破损 HTML（见答案中 markup_2/markup_3 测试）；
- ✅ 零副作用：parseFromString 生成的是独立文档对象，绝不影响当前页面 DOM 或执行脚本；
- ✅ 语义准确：返回的 el.style.cssText 是浏览器计算后的标准 CSS 文本（自动规范化、移除无效声明）。
总结建议
| 场景 | 推荐方案 |
|---|---|
| ✅ 快速原型、简单可控 HTML 片段、轻量工具脚本 | 使用带反向引用的正则 /style\s*=\s*(["']).*?\1/gi |
| ✅ 生产环境、用户输入、不可信 HTML、需高可靠性 | 务必选用 DOMParser —— 它是浏览器级标准，比任何正则都更接近“真实渲染逻辑” |
| ⚠️ 绝对避免 | 无引号配对检查的正则（如 (?:'|")）、手动字符串分割、HTML 字符串拼接解析 |
最终，正则解决“格式问题”，DOM 解决“语义问题”。当目标是提取 HTML 属性时，请优先信任浏览器自己的解析器。
