jquery - 使用 jQuery 或 CSS 更改符号 (@) 的颜色

Question

经过多次摸索和摸索，我走到了死胡同。我在一个使用 Textpattern 的网站上工作，它在主页上显示一个 Twitter 提要。

Textpattern 吐出的 html(在无序列表中)通常看起来像这样:

<li>Some text @<a href="http://...">Username</a>: some more text here!
<span class="tweet-posted">Friday October 7, 2011</span>
</li>

我的问题是:每个<li>中的文字(其中有几个)是灰色的。 <a>文本颜色为浅蓝色，以区别于常规文本。

我想要做的是将一些链接前面的@符号涂成相同的浅蓝色，因为对我来说它在视觉上似乎是链接的一部分(尽管@符号显然不是可点击链接的一部分)。

我试过使用 css 无济于事——在我看来不可能在 css 中选择一个特定的字符——我也试过 jQuery，但我在这方面是个新手，没有任何运气.

不幸的是，因为那个特定的文本是通过 Twitter 发送到 Textpattern 的，所以我无法控制它的格式化方式。显然，如果 @ 符号包含在链接中，那将是最理想的，但这是不可能的。

最后，如果有帮助的话，特定 div 的标记(有几个列表项存在上述问题)如下所示:

<div id="twitter">
  <ul id="tweets">
     <li>Some text @<a href="http://...">Username</a>: some more text here!
         <span class="tweet-posted">Friday October 7, 2011</span></li>
     <li></li>
     <li></li>
</ul>
</div>

如有任何帮助，我们将不胜感激!

Answer 1

使用此代码将@移动到链接内:

$("#tweets").html(function(){
    return $(this).html().replace(/@(<a href=[^>]+?>)/g, "$1@");
});

fiddle :http://jsfiddle.net/9M5XZ/