本文介绍如何使用正则表达式精准匹配并提取 HTML 中某 CSS 选择器（如 #123-module-container-eb7272147 p）后紧跟的 {...} 内部样式声明，重点解决“按指定选择器定位 + 安全捕获内容”的核心需求。
本文介绍如何使用正则表达式精准匹配并提取 html 中某 css 选择器（如 `#123-module-container-eb7272147 p`）后紧跟的 `{...}` 内部样式声明，重点解决“按指定选择器定位 + 安全捕获内容”的核心需求。
在前端开发或 HTML/CSS 解析场景中，常需从内联
✅ 推荐正则方案：零宽断言 + 转义保护
使用 正向先行断言（(? 组合，可实现无捕获、高精度匹配：
/(?<=#123-module-container-eb7272147 p{)[^}]+(?=})/- (?前紧邻目标选择器与左花括号（{ 已转义）；
- [^}]+：匹配一个或多个非右花括号字符，天然避免贪婪越界（无需 ? 非贪婪修饰）；
- (?=})：确保匹配内容后紧跟右花括号，不消耗该字符，保证边界干净。
⚠️ 注意：CSS 选择器中若含正则元字符（如 ., #, [, ], $, ^, *, +, ?, |, , /, {, }），必须预先转义，否则会导致正则语法错误或逻辑偏差。
? 实用 JavaScript 封装示例
以下函数自动转义选择器，并构建动态正则执行提取：
立即学习“前端免费学习笔记（深入）”；
function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[]\]/g, '\$&');
}
function extractCssRules(html, selector) {
const escapedSelector = escapeRegExp(selector);
const pattern = new RegExp(`(?<=${escapedSelector}\s*\{)[^}]+(?=\})`);
const match = pattern.exec(html);
return match ? match[0].trim() : null;
}
// 使用示例：
const html = `<style>#123-module-container-eb7272147 p{text-color:#211E22;bgcolor:test;} #text-module-container-eb7272147 p{color:#211E1E;}</style>`;
console.log(extractCssRules(html, '#123-module-container-eb7272147 p'));
// 输出: "text-color:#211E22;bgcolor:test;"? 关键注意事项
- 空格兼容性：CSS 选择器与 { 之间可能存在空白（如 p {），正则中使用 s* 可鲁棒适配；
- 多匹配处理：若 HTML 中存在多个同名选择器，exec() 仅返回首个匹配；需循环调用 pattern.exec(html) 并检查 lastIndex 实现全量提取；
- 嵌套与注释不支持：该方案适用于标准 CSS 声明块，不处理 @media 嵌套、CSS 注释 /* ... */ 或 calc() 等含 } 的合法表达式——生产环境建议优先使用 CSSOM（如 document.styleSheets）解析；
- 性能提示：对超长 HTML 字符串，正则匹配效率优于 DOM 解析，但应避免在高频交互中重复编译正则（可缓存 RegExp 实例）。
掌握此模式后，你不仅能精准提取样式，还可快速适配其他「关键词后定界符内内容」场景（如 JSON 字段值、模板变量插值等），是正则进阶应用的典型范式。
