颜色特定文本

Question

我希望在 HTML/PHP/CSS/JS 中使用不同颜色的特定文本。

我有一个类似这种结构的文字：

@john 请将邀请移至下周。

我想要实现的是将“@john”字样设为绿色，而其余文本字符应保持为黑色。换句话说，“@”和@之后的第一个空格“”是绿色文本的分隔符。

您能否就如何实现这一目标提出建议？

谢谢， 修身

Answer 1

您可以为此使用正则表达式；字符\@ 将只匹配一个“@”，而字符\w+ 将匹配一个单词 - 单词是一组不被逗号、空格、句号等分隔的字符。

最后，您需要使用String Iterator 来查找所有匹配项并循环遍历它们，当然，还需要重新着色。

您可以这样做：

function color_text(text) {
    let matches = text.matchAll(/\@\w+/g);
    let current_match;
    while(!current_match?.done) {
        current_match = matches.next();
        if(current_match?.done) {
            break;
        }
        let value = current_match?.value[0];
        text = text.replace(value, "<span style='color: #00db58'>" + value + "</span>");
    }
    return text;
}


// TESTING HERE  -- - - -- - - -

document.write(color_text("@john please move the invite to the next week."));
document.write("<br>");
document.write(color_text("@john please tell @josh to stop being annoying."));