Flutter如何修改字符串中以@开头单词的文本颜色

算力阿峰

2026-8-9

实现以@开头单词的文本颜色修改

前端（HTML + JavaScript）

通过正则匹配目标单词，用带样式的HTML标签包裹即可：

const originalStr = "I am tagging @John at the post of @Elvin";
// 全局匹配所有@开头的单词，替换为红色样式的span标签
const coloredStr = originalStr.replace(/@(\w+)/g, '<span style="color: #ff0000;">@$1</span>');
// 将处理后的内容插入页面元素
document.getElementById("targetElement").innerHTML = coloredStr;

如果需要支持@后包含特殊字符（比如@John_Doe），可以把正则调整为@[^\s]+，匹配@后直到空格的所有内容。

Android（Kotlin）

利用SpannableString实现富文本样式：

val originalStr = "I am tagging @John at the post of @Elvin"
val spannable = SpannableString(originalStr)
val pattern = Pattern.compile("@\\w+")
val matcher = pattern.matcher(originalStr)

// 遍历所有匹配结果，设置文字颜色
while (matcher.find()) {
    val start = matcher.start()
    val end = matcher.end()
    spannable.setSpan(ForegroundColorSpan(Color.RED), start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
}
// 给TextView赋值
textView.text = spannable

iOS（Swift）

通过NSAttributedString添加颜色属性：

let originalStr = "I am tagging @John at the post of @Elvin"
let attributedStr = NSMutableAttributedString(string: originalStr)
let pattern = "@\\w+"
let regex = try! NSRegularExpression(pattern: pattern)
let matches = regex.matches(in: originalStr, range: NSRange(originalStr.startIndex..., in: originalStr))

// 为每个匹配项设置红色
for match in matches {
    attributedStr.addAttribute(.foregroundColor, value: UIColor.red, range: match.range)
}
// 给UILabel设置属性文本
label.attributedText = attributedStr