本文详解如何使用带正向先行断言（lookbehind）和正向后行断言（lookahead）的正则表达式，安全、准确地从 HTML 字符串中提取特定 CSS 选择器（如 #123-module-container-eb7272147 p）紧随其后的 {...} 内部样式声明，同时规避字符转义与贪婪匹配风险。
本文详解如何使用带正向先行断言（lookbehind）和正向后行断言（lookahead）的正则表达式，安全、准确地从 html 字符串中提取特定 css 选择器（如 `#123-module-container-eb7272147 p`）紧随其后的 `{...}` 内部样式声明，同时规避字符转义与贪婪匹配风险。
在前端开发或 CSS 解析场景中，常需从内联
核心正则模式如下：
(?<=#123-module-container-eb7272147 p{)[^}]+(?=})- (?正向先行断言（lookbehind），确保匹配位置前必须是 #123-module-container-eb7272147 p{（注意 { 需转义）；
- [^}]+ 表示“一个或多个非 } 字符”，精准捕获花括号内全部内容，避免贪婪跨段（如误吞下一个 }）；
- (?=}) 是正向后行断言（lookahead），确保匹配内容后紧接 }，不消耗该字符，保证边界严格。
⚠️ 关键注意事项：
-
选择器需转义：CSS 选择器中的 .、*、+、?、^、$、{、}、(、)、|、[、]、 等在正则中有特殊含义，必须预先转义。推荐使用标准转义函数：
function escapeRegExp(string) { return string.replace(/[.*+?^${}()|[]\]/g, '\$&'); } -
空格容错：实际 CSS 中选择器与 { 间可能有空白（如 p {），建议在断言中加入 s*：
const pattern = new RegExp(`(?<=${escapeRegExp(selector)}\s*\{)[^}]+(?=\})`); - 浏览器兼容性：正向先行断言（?
完整可运行示例（含 HTML 表单与事件处理）：
立即学习“前端免费学习笔记（深入）”；
<form id="cssExtractor">
<fieldset>
<label>Selector: </label>
<input type="text" id="selector" value="#123-module-container-eb7272147 p">
</fieldset>
<fieldset>
<label>HTML Code:</label>
<textarea id="html" rows="6"><div><style>#123-module-container-eb7272147 p{text-color:#211E22;bgcolor:test;} #text-module-container-eb7272147 p{color:#211E1E;}</style></div></textarea>
</fieldset>
<button type="submit">Extract Rules</button>
</form>
<script>
function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[]\]/g, '\$&');
}
document.getElementById('cssExtractor').addEventListener('submit', (e) => {
e.preventDefault();
const html = document.getElementById('html').value;
const selector = document.getElementById('selector').value.trim();
if (!selector) return;
const escapedSelector = escapeRegExp(selector);
const regex = new RegExp(`(?<=${escapedSelector}\s*\{)[^}]+(?=\})`, 'g');
const matches = [...html.matchAll(regex)];
if (matches.length > 0) {
alert("Extracted CSS declarations:
" + matches[0][0]);
} else {
alert("No matching CSS rule found.");
}
});
</script>✅ 总结：该方案通过断言实现“零宽度锚定”，完全解耦选择器匹配与内容提取，兼具精度与可维护性。实际应用中，请始终对用户输入的选择器执行 escapeRegExp()，并结合 g 标志支持多匹配（如需提取所有同名选择器规则）。对于复杂 CSS 解析需求（如媒体查询、嵌套），建议转向专用解析器（如 css-tree），但本正则方案在轻量级、单层规则提取场景下高效可靠。
