如何编写灵活正则表达式从CSS文件提取所有类名？

针对你提到的CSS文件格式混乱、链式类名匹配失败、简单类名无法识别的问题，这里提供一个符合需求的正则表达式：

(?<=}|^|\n|[\s,:{])\.([A-Za-z][A-Za-z0-9_-]*)(?=[\s,:{]|$|\n)

正则规则拆解 #

• 前置断言 (?<=}|^|\n|[\s,:{])：确保类名的.前缀前是合法的分隔场景，包括上一个选择器的闭合大括号}、字符串开头、换行、空白符、逗号、冒号或左大括号，避免误匹配CSS属性中的点（比如url(./img.jpg)）。
• 类名匹配 \.([A-Za-z][A-Za-z0-9_-]*)：
  • \. 匹配类名的.前缀
  • 捕获组([A-Za-z][A-Za-z0-9_-]*)匹配合法CSS类名：首字符必须是大小写字母，后续可跟字母、数字、-或_，覆盖纯字母类名（如.glyphicon）、带连字符/下划线的类名，以及链式类名中的每个单独类。
• 后置断言 (?=[\s,:{]|$|\n)：确保类名结束于合法位置，包括空白符、逗号、冒号、左大括号、字符串结尾或换行，适配无空格的单行压缩CSS。

实际使用示例 #

JavaScript 环境

const cssContent = `
.glyphicon { font-size: 16px; }
.Interesting-Complex.Class-Name2.Specialty_Class { margin: 0; }
.single-class, .another_class { padding: 8px; }
`;
const classRegex = /(?<=}|^|\n|[\s,:{])\.([A-Za-z][A-Za-z0-9_-]*)(?=[\s,:{]|$|\n)/g;
const extractedClasses = [...cssContent.matchAll(classRegex)].map(match => match[1]);
console.log(extractedClasses);
// 输出: ["glyphicon", "Interesting-Complex", "Class-Name2", "Specialty_Class", "single-class", "another_class"]

Python 环境

import re

css_content = """
.glyphicon { font-size: 16px; }
.Interesting-Complex.Class-Name2.Specialty_Class { margin: 0; }
.single-class, .another_class { padding: 8px; }
"""
class_pattern = r'(?<=}|^|\n|[\s,:{])\.([A-Za-z][A-Za-z0-9_-]*)(?=[\s,:{]|$|\n)'
extracted_classes = re.findall(class_pattern, css_content)
print(extracted_classes)
# 输出: ['glyphicon', 'Interesting-Complex', 'Class-Name2', 'Specialty_Class', 'single-class', 'another_class']

注意事项 #

• 该正则会自动忽略CSS伪类/伪元素前缀（比如.class:hover中的hover），只提取核心类名class，符合你提取可用类名的需求。
• 若需要支持不符合CSS规范的类名（比如以数字开头的.3invalid），可将捕获组修改为[A-Za-z0-9_-]+，但不推荐使用这类不规范类名。
• 对于包含嵌套语法的预处理器（Sass/Less），该正则同样能正确提取各级类名。

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