如何使用PHP提取CSS代码中的类名并存入数组

PHP没有专门用于提取CSS类名的专用内置函数，但通过正则匹配函数配合数组处理函数，几行代码就能实现需求；jQuery运行在前端环境，同样可以通过正则完成相同的文本处理逻辑。

• 核心逻辑：用正则匹配所有CSS规则块开头的类选择器，自动过滤掉属性值、大括号、属性名等无关内容，再整理成目标数组。
• 用到的都是PHP原生内置函数，无需安装第三方扩展：
  • preg_match_all()：全局正则匹配符合规则的类名
  • array_unique()：对提取到的类名去重
  • array_values()：重置数组索引，得到连续数字下标的标准数组
• 完整可运行代码：

/**
 * 从CSS代码中提取所有类名
 * @param string $css_code 待处理的CSS原始代码
 * @return array 提取到的类名数组
 */
function extract_css_classes(string $css_code): array {
    $classes = [];
    // 正则规则：匹配.开头的合法CSS类名，后接任意空白+{，避免匹配到属性值里的.字符
    preg_match_all('/\.(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)\s*\{/', $css_code, $matches);
    if (!empty($matches[1])) {
        $classes = array_values(array_unique($matches[1]));
    }
    return $classes;
}

// 测试调用
$css = <<<EOF
.dungarees {
  content: "\ef04";
}
.jacket {
  content: "\ef05";
}
.jumpsuit {
  content: "\ef06";
}
.shirt {
  content: "\ef07";
}
EOF;

$my_array = extract_css_classes($css);
// 输出结果为：Array ( [0] => dungarees [1] => jacket [2] => jumpsuit [3] => shirt )
print_r($my_array);

如果是在浏览器端处理CSS文本，不需要后端参与，用JS（jQuery环境下也可以直接用原生JS逻辑，不需要额外依赖jQuery专属API）就能实现，核心正则逻辑和PHP版本一致：

/**
 * 从CSS文本中提取所有类名
 * @param {string} cssCode 原始CSS代码
 * @returns {Array<string>} 类名数组
 */
function extractCssClasses(cssCode) {
  const classReg = /\.(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)\s*\{/g;
  const classes = [];
  let matchRes;
  while ((matchRes = classReg.exec(cssCode)) !== null) {
    const className = matchRes[1];
    if (!classes.includes(className)) classes.push(className);
  }
  return classes;
}

// 调用示例
const testCss = `
.dungarees {
  content: "\ef04";
}
.jacket {
  content: "\ef05";
}
.jumpsuit {
  content: "\ef06";
}
.shirt {
  content: "\ef07";
}
`;
const myArray = extractCssClasses(testCss);
// 控制台输出：["dungarees", "jacket", "jumpsuit", "shirt"]
console.log(myArray);

注意：上述正则适配单类选择器的常规场景，如果你的CSS存在多类拼接选择器（如.a.b{}）、伪类/伪元素（如.btn:hover{}）、嵌套语法，可以根据实际业务微调正则规则，基础匹配逻辑不变。

内容的提问来源于stack exchange，提问作者kovrita is The life