jquery - 単語が @ で始まる場合に CSS クラスを割り当てる

Question

私はtwitter Webアプリに取り組んでいます。段落で@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

このjqueryプラグインを確認してください

score 0 · Accepted Answer

これは純粋な css だけではできません。ラーフルが述べているように、段落全体にスタイルを適用することはできますが@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;
}

4 に答える 4