javascript - 如果文本包含 '@' 更改 '@' 的颜色

Question

我正在为我的问题寻找解决方案。
我有一段来自 Twitter 推文的一些文本。现在我想将所有“@”更改为一种颜色。

这是我在文本中查找“@”的方法:

if (status.indexOf("@") >= 0)
{

}

但是现在我怎样才能改变@的颜色呢？ (添加一个span和class什么的...)

状态是一个变量，内容为ex。像这样:

Dita Von Teese draagt geprinte 3D-jurk  <a target="_blank" href="http://t.co/s2y6b21S0I">http://t.co/s2y6b21S0I</a> via @<a target="_blank" href="http://twitter.com/Knackweekend">Knackweekend</a> 

Answer 1

在没有看到您的 HTML 的情况下，我能提供的最好的方法是简单的替换，并且我假设 status 是 HTML 元素/节点的 jQuery 集合:

status.html(function(i,h){
    return h.replace(/@/g,'<span class="atSign">@</span>');
});

加上CSS:

.atSign {
    color: #f90;
}

已更新，因为 status 似乎是一个字符串(来自下面的评论):

var status = '<a target="_blank" href="t.co/s2y6b21S0I">http://t.co/s2y6b21S0I</a>; via @<a target="_blank" href="twitter.com/Knackweekend">Knackweekend</a>',
    newStatus = status.replace(/@/g,'<span class="atSign">@</span>');
console.log(newStatus);

JS Fiddle demo .

使用 CSS 为 @ 和以下 a 元素着色:

.atSign,
.atSign + a {
    color: #f90;
}

JS Fiddle demo .

要将 @ 和以下 a 元素包装在 span 中:

var status = '<a target="_blank" href="t.co/s2y6b21S0I">http://t.co/s2y6b21S0I</a>; via @<a target="_blank" href="twitter.com/Knackweekend">Knackweekend</a>',
    newStatus = status.replace(/(@.+<\/a>)/g,function(a){
    return '<span class="atSign">' + a + '</span>';
    });
console.log(newStatus);

JS Fiddle demo .

引用资料:

• html() .
• JavaScript regular expressions .
• String.replace() .