使用Python正则提取CSS选择器：拆分同一class下多选择器问题

问题说明 #

解析HTML提取CSS类选择器时，无法拆分同一class属性下的多个类名，得到的结果是每个class属性的完整字符串集合，而非单个独立的类选择器列表。

原实现代码 #

html = '<div class="col-xl-4 col-md-6"> <div class="card hover-translate-y-n3 hover-shadow-lg overflow-hidden"><div class="position-relative overflow-hidden">'

css = re.findall(r'(?:class=")([^"]*)', html)

当前输出 #

['col-xl-4 col-md-6', 'card hover-translate-y-n3 hover-shadow-lg overflow-hidden', 'position-relative overflow-hidden']

期望输出 #

['col-xl-4', 'col-md-6', 'card', 'hover-translate-y-n3', 'hover-shadow-lg', 'overflow-hidden', 'position-relative', 'overflow-hidden']

可行解决方案 #

方案1：提取后拆分合并 #

先提取所有class属性的完整值，再通过空格拆分每个值，最后将所有拆分后的类名合并为一个列表：

import re

html = '<div class="col-xl-4 col-md-6"> <div class="card hover-translate-y-n3 hover-shadow-lg overflow-hidden"><div class="position-relative overflow-hidden">'

# 提取所有class属性的完整内容
class_groups = re.findall(r'(?:class=")([^"]*)', html)
# 拆分每个组的类名并合并到结果列表
css = []
for group in class_groups:
    css.extend(group.split())

print(css)

方案2：正则直接匹配单个类名 #

调整正则表达式，直接匹配class="后每个独立的类名（以空格或双引号为边界），一步得到目标列表：

import re

html = '<div class="col-xl-4 col-md-6"> <div class="card hover-translate-y-n3 hover-shadow-lg overflow-hidden"><div class="position-relative overflow-hidden">'

# 直接匹配每个独立的CSS类选择器
css = re.findall(r'class="(?:[^"]*?\s)?(\S+)(?=\s|")', html)

print(css)

两种方案均可得到期望输出：方案1逻辑直观，易于理解和维护；方案2通过正则一步完成，代码更简洁。

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