特定の単語を異なる色にするにはどうすればよいですか？

Question

私は自分のウェブページでさまざまな色を変える方法を考えています。 EG：「これ」は赤色に変わりますが、「ボックス」は青色に変わります。

は、これまでのところ私はこれを持っている：

<div class="scroll"> 
      <p class="margin">This box should scroll when it runs out of space.This box should     scroll when it  runs out of space.This box should scroll when it runs     out of space.This box should scroll when it runs  out of     space.This box should scroll when it runs out of space.This box should scroll     when it runs out  of space.This box should scroll when it runs     out of space.This box should scroll when it runs out of     space.This box should scroll when it runs out of space.This box should scroll     when it runs out of   space.This box should scroll when it runs out     of space.This box should scroll when it runs out of   space.This box     should scroll when it runs out of space.This box should scroll when it runs out     of  space.This box should scroll when it runs out of space.This box     should scroll when it runs out of  space.This box should scroll     when it runs out of space.This box should scroll when it runs out of     space.This box should scroll when it runs out of space.This box should scroll     when it runs out of   space.This box should scroll when it runs out     of space.This box should scroll when it runs out of   space.This box     should scroll when it runs out of space.This box should scroll when it runs out     of  space.This box should scroll when it runs out of space.This box     should scroll when it runs out of  space.This box should scroll     when it runs out of space.This box should scroll when it runs out of     space.This box should scroll when it runs out of space.This box should scroll     when it runs out of   space.This box should scroll when it runs out     of space.This box should scroll when it runs out of   space.This box     should scroll when it runs out of space.This box should scroll when it runs out     of  space.This box should scroll when it runs out of space.This box     should scroll when it runs out of  space.This box should scroll     when it runs out of space.This box should scroll when it runs out of     space.This box should scroll when it runs out of space.This box should scroll     when it runs out of   space.This box should scroll when it runs out     of space.This box should scroll when it runs out of   space.This box     should scroll when it runs out of space.This box should scroll when it runs out     of  space.This box should scroll when it runs out of space.This box     should scroll when it runs out of  space.This box should scroll     when it runs out of space.This box should scroll when it runs out of     space.This box should scroll when it runs out of space.This box should scroll     when it runs out of   space.This box should scroll when it runs out     of space.This box should scroll when it runs out of   space.This box     should scroll when it runs out of space.This box should scroll when it runs out     of  space.This box should scroll when it runs out of space.This box     should scroll when it runs out of  space.This box should scroll     when it runs out of space.This box should scroll when it runs out of     space.This box should scroll when it runs out of space.This box should scroll     when it runs out of   space.This box should scroll when it runs out     of space. 
     </p> 
    </div> 

編集：

うーん、申し訳ありません。私はあなたが何を言っているのか、それをどう使うべきかを本当に理解していません。

Answer 1

色を変更したい単語の周りにスパンを作成することができます。

私ははい、私は質問がどのjavascriptまたはjqueryタグをしていない知っているが、これは:)

が@Nic Meiringの答えにこれを追加提案する可能性がありhttp://jsfiddle.net/LwR8D/

Answer 2

であなたのためのデモを作成しました：

ページのご<header></header>セクションに次の行を追加します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 

は、その後、あなたのページに次のJavaScriptを呼び出すための別の<script></script>セクションを追加 <header></header>セクション：

(function($) { 
    var thePage = $("body"); 
    thePage.html(thePage.html().replace(/This/ig,'<span id="This">This</span>')); 
})(jQuery) 

Fiddle link

Use jQuery to Replace a Word

Answer 3

Nic Meiringは、有効な解決策に答えが、して、長い段落で色を変更することは困難です特定の単語を見つけてそれらにCSSを適用する。短いテキストの場合は問題ありませんが、長い段落や可変テキストの場合は、一般的な解決策を適用する必要があります。

CSSソリューション：（すべてのブラウザわからない）あなたが使用することを許可されている場合は

• Overriding The Default Text Selection Color With CSS

jQuery：

• highlight: JavaScript text higlighting jQuery plugin

またはサーバー側言語で文字列置換方法を使用できます。 innerHTMLプロパティと

$text = str_replace("red", "<span class='red-class'>red<span>", "This is red"); 

Answer 4

ダーティ-しかし、作業溶液：それで

var words_and_colors = [ 
    {'word':'this', 'color':'red'}, 
    {'word':'to', 'color':'blue'} 
]; 

function hilte_words_in_element (element, words) { 
    for (var z=0; z < words.length; z++) { 
     var re = new RegExp('('+words[z]['word']+'\\b)', 'gi') 
     element.innerHTML = element.innerHTML.replace(
      re, 
      "<span style=\"color:"+words[z]['color']+"\">$1</span>" 
     ); 
    } 
} 
hilte_words_in_element(document.getElementById('changeMe'), words_and_colors); 

フィドル：PHPでの例str_replaceについては、これは "悪い" と考えていることをhttp://jsfiddle.net/8vDgH/

注 - 1がすべきそれが避けられればinnerHTMLを扱わないでください。あなたがそれを使用している状況を知らずに、私はDOMとのより具体的な対話を行うことができません。あなたが使っているものを知っているので、コードをリファクタリングして、ノードの内容を変更するより受け入れやすい手段を使用することをお勧めします。

これがサーバー側で実行できる場合は、はるかに効率的です。同様のコンセプトを使用しますが、コンテンツが出力される前に行います。これがあなたのユースケースで実行可能かどうかは分かりませんが、もしそうなら、最高のパフォーマンスを持つルートとなることは間違いありません（innerHTMLを避けることができます）