如何在Swift中通过SwiftSoup获取指定类的CSS属性及值？

我正在使用SwiftSoup库解析动态生成的HTML字符串，现有代码如下：

let doc = try SwiftSoup.parse(htmlString)

解析后得到的HTML结构为：

<html>
    <head>
        <style>
            myClass {
                font-size: 14px;
                color: #000;
            }
        </style>
    </head>
    <body>
        <span class="myClass">Hello World</span>
    </body>
</html>

目前我可以通过以下代码获取span元素的class值：

let span = try doc.select("body span")
let myClass = try span.attr("class")

想知道是否有办法遍历该类的所有CSS属性，获取属性名和对应值，实现类似如下代码的效果：

var cssStyle = ""
let myClassAttrs = // 包含myClass所有属性（键）和值的字典
for attr, value in myClassAttrs {
    cssStyle += "\(attr): \(value);"
}

解决方案 #

SwiftSoup本身不提供直接解析CSS样式规则的功能，需要手动提取并解析<style>标签内容，具体步骤如下：

1. 提取<style>标签内的文本内容
2. 通过正则匹配找到目标类对应的样式块
3. 拆分样式块中的属性与值，生成字典

完整代码示例：

do {
    let doc = try SwiftSoup.parse(htmlString)
    // 1. 获取style标签内的内容
    guard let styleContent = try doc.select("style").first()?.html() else {
        print("未找到style标签")
        return
    }
    
    // 2. 获取目标元素的class
    let span = try doc.select("body span").first()!
    let targetClass = try span.attr("class")
    // 注意：如果style里是标准类选择器（.myClass），则添加前缀点；如果是元素选择器则直接用targetClass
    let classSelector = targetClass // 对应你提供的HTML里的myClass { 写法
    // 如果是标准类选择器，改为 let classSelector = ".\(targetClass)"
    
    // 3. 正则匹配目标类的样式块
    let pattern = "\(classSelector)\\s*{([^}]*)}"
    guard let regex = try? NSRegularExpression(pattern: pattern, options: .caseInsensitive) else {
        print("正则表达式创建失败")
        return
    }
    
    let matches = regex.matches(in: styleContent, options: [], range: NSRange(styleContent.startIndex..., in: styleContent))
    guard let match = matches.first, let styleBlockRange = Range(match.range(at: 1), in: styleContent) else {
        print("未找到目标类的样式")
        return
    }
    
    let styleBlock = styleContent[styleBlockRange]
    // 4. 拆分属性和值，生成字典
    var styleDict = [String: String]()
    let styleItems = styleBlock.components(separatedBy: ";")
    for item in styleItems {
        let trimmedItem = item.trimmingCharacters(in: .whitespacesAndNewlines)
        guard !trimmedItem.isEmpty else { continue }
        let keyValuePair = trimmedItem.components(separatedBy: ":")
        guard keyValuePair.count == 2 else { continue }
        let attr = keyValuePair[0].trimmingCharacters(in: .whitespaces)
        let value = keyValuePair[1].trimmingCharacters(in: .whitespaces)
        styleDict[attr] = value
    }
    
    // 5. 拼接成目标字符串
    var cssStyle = ""
    for (attr, value) in styleDict {
        cssStyle += "\(attr): \(value);"
    }
    print(cssStyle) // 输出：font-size: 14px;color: #000;
} catch {
    print("解析错误：\(error)")
}

注意事项 #

• 代码中默认匹配你提供的HTML里的myClass {写法（元素选择器），如果是标准CSS类选择器（.myClass {），需要修改classSelector为带前缀点的格式
• 正则解析仅适用于简单CSS规则，若样式包含嵌套、媒体查询等复杂语法，建议使用专门的CSS解析库来提升兼容性

内容的提问来源于stack exchange，提问作者KANAYO AUGUSTIN UG