正则表达式可提取 CSS 声明的属性名与值，但需处理空格、注释、函数、引号等干扰；基础模式为/([a-zA-Z-]+)s:s(1?)(?=s;|s*$)/g，增强版支持引号、括号及转义；实际建议先清理注释和空白，再匹配并清洗结果；复杂场景（如嵌套var、@规则、多行box-shadow）应改用CSS语法树解析器。;{ ↩
正则表达式可以高效提取 CSS 声明块中每个属性名与对应值，但需注意 CSS 语法的灵活性（如空格、换行、注释、函数值、引号字符串等）。核心思路是：先匹配完整的 property: value; 结构，再分别捕获属性名和值，同时规避常见干扰项。
匹配单条 CSS 声明的基本正则
最简可用模式为：
/([a-zA-Z-]+)s*:s*([^;{]*?)(?=s*;|s*$)/g说明：
-
第一组
([a-zA-Z-]+)：捕获属性名，支持字母和短横线（如font-size），不包含数字开头（符合 CSS 标准） -
s*:s*：匹配冒号及前后任意空白（空格、制表、换行） -
第二组
([^;{]*?)：非贪婪匹配值，直到遇到分号;或左花括号{或行尾——避免跨声明误捕 -
(?=s*;|s*$)：正向先行断言，确保后面是分号或结尾，不消耗字符
处理含函数、引号、注释等复杂值
上述简单正则在遇到 background: url("img.png") no-repeat; 或 transform: translate(50%, 50%); 时会截断。更健壮的方式是跳过括号/引号内内容：
关键增强点：
- 用非捕获组
(?:...)组合多种“安全字符”：普通非分号字符、双引号字符串（支持转义）、单引号字符串、圆括号内容（如rgb()、calc()）、方括号（CSS 自定义属性语法） - 字符串内支持转义（
"、\），避免提前结束 - 仍以分号或行尾为声明边界，保证单条匹配
实际解析建议（JavaScript 示例）
不推荐仅靠正则完整解析 CSS（应优先用浏览器原生 CSSStyleSheet API 或成熟库如 css-tree）。若确需正则预处理，可按如下步骤：
- 先移除 CSS 注释：
css.replace(//*[sS]*?*//g, '') - 将多行声明统一为单行（可选）：
.replace(/s+/g, ' ')，减少换行干扰 - 对每个匹配结果，trim 属性名和值，过滤空行
- 对值做进一步清理：去除首尾空白、合并连续空格、识别
!important并剥离（如value.replace(/s*!importants*$/i, '')）
哪些情况正则难以可靠处理
以下场景建议放弃正则，改用语法树解析器：
- CSS 自定义属性嵌套：
--main-color: var(--primary, #007bff); - @规则内的声明：
@media (min-width: 768px) { ... }中的嵌套结构 - 带换行/缩进的长值：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 -1px 0 #eee; - Unicode 属性名或值（虽少见，但合法）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
