JavaScript如何从字符串中提取CSS规则块并生成目标数组

完全可以通过JavaScript正则实现需求，针对无嵌套的简单CSS规则场景，两种常用实现方式如下：

正则实现 #

核心思路是匹配「从选择器开头到闭合大括号」的完整规则，代码示例：

// 无换行的原始CSS字符串
const rawCss = '.fa { color: red; }small { font-size: 16px; }#content { background-color: blue; }';
const cssRuleReg = /[^}]+{[^}]+}/g;
const result = rawCss.match(cssRuleReg) || [];
// 输出结果即为你需要的数组格式：['.fa { color: red; }', 'small { font-size: 16px; }', '#content { background-color: blue; }']

注意该正则方案仅适用于没有@media、@keyframes、嵌套选择器这类包含多重大括号的CSS场景，复杂场景下正则匹配容易出错。

非正则简易实现 #

你提到的更简便的非正则方案通常是基于字符串分割处理，逻辑更易懂也更容易维护：

const rawCss = '.fa { color: red; }small { font-size: 16px; }#content { background-color: blue; }';
const result = rawCss.split('}')
  .filter(item => item.trim()) // 过滤空字符串
  .map(item => `${item.trim()}}`);

如果需要处理带嵌套规则的复杂CSS，建议使用专业的CSS解析库完成提取，避免自行处理出现边界兼容问题。

内容的提问来源于stack exchange，提问作者Forbidden