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@");
});

小提琴：http://jsfiddle.net/9M5XZ/

Answer 2

Example

$('li').each(function () {
 this.innerHTML = this.innerHTML.replace(/@<a/, '<span class="light-green">@</span><a')   
})

替换链接中的第一个@

Answer 3

使用正则表达式（Regexp）来解析'@'符号，并替换为<span>包裹@，您可以使用某些CSS定位。

编辑：是的，Rob W是对的 - 你想让它成为链接本身的一部分，而不仅仅是它的颜色。

使用jQuery或CSS更改符号（@）的颜色

3 个答案: