iOS开发：UILabel中HTML标签未解析直接显示，CSS已生效求解决

问题背景 #

使用NSAttributedString将HTML文本转换为富文本后，在Attributed模式的UILabel中仅CSS样式生效，但<br>、<u>、<p>、<ol>等HTML标签直接显示在界面上，未被解析。

我的HTML文本 #

"<style>* {font-size: 12pt !important;color: #000000 !important;font-family: Montserrat-Regular !important;}</style>Perform the following steps:<br><u>Option 1:</u><br><p>1) Upon receiving a push notification alert, tap on the push notification to launch BIMB Authenticator</p><p>2) Verify the transaction details and choose \"Approve\"</p><p>3) Complete</p><br><u>Option 2:</u><br><ol><p>1) If you didn’t receive push notification, you may launch BIMB Authenticator</p><p>2) Verify the transaction details and choose \"Approve\"</p><p>3) Complete</p>"

转换用的Swift扩展代码 #

extension String {
    func attributedStringFromHTML() -> NSAttributedString? {
        guard let data = "\(self)"
            .data(using: .utf8, allowLossyConversion: false) else {
            Log.error(category: .transaction, message: "Unable to decode data from html string: %@", self)
            return nil
        }
        
        let options: [NSAttributedString.DocumentReadingOptionKey: Any] = [
            .documentType: NSAttributedString.DocumentType.html,
            .characterEncoding: String.Encoding.utf8.rawValue
        ]
        
        if let attributedString = try? NSAttributedString(data: data, options: options, documentAttributes: nil) {
            return attributedString
        } else {
            Log.error(category: .transaction,
                      message: "Unable to create attributed string from html string: %@",
                      self)
            return nil
        }
    }
}

解决步骤 #

• 移除字符串首尾的多余引号
  你的HTML字符串首尾包含额外的双引号，这会让解析器将整个内容识别为普通文本而非HTML文档。修改后的HTML字符串应该去掉首尾的引号：

  let cleanHtml = "<style>* {font-size: 12pt !important;color: #000000 !important;font-family: Montserrat-Regular !important;}</style>Perform the following steps:<br><u>Option 1:</u><br><p>1) Upon receiving a push notification alert, tap on the push notification to launch BIMB Authenticator</p><p>2) Verify the transaction details and choose \"Approve\"</p><p>3) Complete</p><br><u>Option 2:</u><br><ol><p>1) If you didn’t receive push notification, you may launch BIMB Authenticator</p><p>2) Verify the transaction details and choose \"Approve\"</p><p>3) Complete</p>"
  

• 补充完整的HTML结构（可选但推荐）
  iOS的HTML解析器对完整的文档结构兼容性更好，将内容包裹在<html><body>标签内可以提升解析稳定性：

  let fullHtml = "<html><body>\(cleanHtml)</body></html>"
  label.attributedText = fullHtml.attributedStringFromHTML()
  

• 修复转义字符问题
  原字符串中的\"是Swift的转义双引号，确保传递给解析器的是正确的HTML内容——如果是从外部获取的转义字符串，需要先完成解码，避免解析器误判。

• 优化错误处理
  原代码用try?会隐藏解析错误，改用do-catch可以捕获具体错误信息，方便排查问题：

  extension String {
      func attributedStringFromHTML() -> NSAttributedString? {
          guard let data = self.data(using: .utf8, allowLossyConversion: false) else {
              Log.error(category: .transaction, message: "Unable to decode data from html string: %@", self)
              return nil
          }
          
          let options: [NSAttributedString.DocumentReadingOptionKey: Any] = [
              .documentType: NSAttributedString.DocumentType.html,
              .characterEncoding: String.Encoding.utf8.rawValue
          ]
          
          do {
              return try NSAttributedString(data: data, options: options, documentAttributes: nil)
          } catch {
              Log.error(category: .transaction,
                        message: "Failed to create attributed string: %@", error.localizedDescription)
              return nil
          }
      }
  }
  

内容的提问来源于stack exchange，提问作者Bawenang Rukmoko Pardian Putra