SwiftUI中如何为Text组件内字符串的部分内容设置背景色？

要实现仅为Text中的部分内容设置背景色，核心是将原字符串拆分为可独立配置样式的文本片段，或通过AttributedString实现局部样式设置，以下是两种可行方案：

方案1：拼接多个Text组件（兼容iOS 13+） #

把原字符串拆分为普通文本和需要高亮的文本片段，分别创建Text并拼接，仅对目标片段设置背景色：

if let subHeadline = viewModel.createSubHeadlineText() {
    // 替换为你需要高亮的目标子串
    let targetHighlightText = "需要高亮的内容"
    
    guard let highlightRange = subHeadline.range(of: targetHighlightText) else {
        // 未找到目标子串时显示原文本
        Text(subHeadline)
            .foregroundColor(.black)
        return
    }
    
    // 拆分字符串为前缀、高亮部分、后缀
    let prefixText = String(subHeadline[..<highlightRange.lowerBound])
    let highlightText = String(subHeadline[highlightRange])
    let suffixText = String(subHeadline[highlightRange.upperBound...])
    
    // 拼接Text组件，仅高亮部分设置背景色
    Text(prefixText)
        .foregroundColor(.black)
    + Text(highlightText)
        .foregroundColor(.black)
        .background(!viewModel.isNotSimilar ? Color.yellow : .clear)
    + Text(suffixText)
        .foregroundColor(.black)
}

方案2：使用AttributedString（iOS 15+） #

利用AttributedString可更便捷地配置局部样式，适合iOS 15及以上版本：

if let subHeadline = viewModel.createSubHeadlineText() {
    var attributedStr = AttributedString(subHeadline)
    // 替换为实际需要高亮的文本范围（可根据业务逻辑动态生成）
    let highlightNSRange = NSRange(location: 0, length: 8)
    
    if !viewModel.isNotSimilar {
        // 为目标范围设置背景色
        attributedStr[highlightNSRange].backgroundColor = .yellow
    }
    // 统一设置前景色
    attributedStr.foregroundColor = .black
    
    Text(attributedStr)
}

补充说明 #

• 如果需要高亮动态内容（比如多片段、正则匹配结果），可结合字符串遍历或正则表达式拆分文本。
• 拼接Text的方式兼容性更强，AttributedString写法更简洁，可根据项目最低支持版本选择。

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