jquery - 如果单词以 @ 开头，则分配 css 类

Question

我正在开发 twitter 网络应用程序。在段落中，如果我提到@username，我想使用css 突出显示段落中的@username。什么是最容易做到这一点。我有 jquery，但不知道如何。谢谢

score 2 · Accepted Answer

您可以通过创建一个名为“highlight”的 CSS 类来实现这一点，该类将用于突出显示和抓取段落内容。并替换为

$(function(){
    var str = paragraphtext;
    str = str.replace(/\B@([\w-]+)/gm, '<span class="highlight">@$1</span>');
    alert(str);
});

检查这个快速演示

score 0 · Accepted Answer

仅使用纯 css 是不可能的。你可以 - 正如 rahul 所说 - 将样式应用于整个段落......但是@something直接使用样式来定位单词是不可能的，除非它已经用 dom 元素包装.

你最好的办法是用 javascript 来寻找它，然后用<span class="user">@something</span>... 替换它们，然后你可以用 css 来定位它们。

score 0 · Accepted Answer

围绕您要突出显示的所有单词创建一个包含类的跨度，并将所需的 css 分配给该类。

例子：

<p>This is text <span class="hl">@forsomeone</span> . 
You should also check <span class="hl">@abc</span> . 
What you say?</p>

和CSS

.hl {
  color: red;
}

score 0 · Accepted Answer

检查这个 jquery 插件

4 回答 4