私はプロジェクトをしていますが、私は知らない何かをする必要があります。 <td>内部にあるテキストの中の特定の単語（キーワード）を色付けする
テキストはランダムであり、データベースから来ているので、静的に行うことができます。
これは通常のテキストです。「動物、ペット」のような言葉に色を付けたいと思います。 赤のような動物のアペール、青のフォントの色のようなペットのような、それぞれのための特定の色を入れてください。
私はJquery doを使って、ページがロードされた後（readyFunction）にそれを行う関数を作っておかなければならないと思います。
しかし、私はそれを行うためのアイデアはありません、私はjqueryで新しいです。アイデアを教えてください。
ありがとうございます！
これは本当に「汚い」ソリューションですが、あなたのタスクにアプローチする方法の一例としてのあなたを提供します：
<body>
<table id="the_table">
<tr>
<td>random words from DB: like an apple, pet, whatever, yet another apple</td>
</tr>
</table>
<script>
$(document).ready(function() {
var content_cell,
random_words = "",
colors_map = {
"apple": "red",
"pet": "blue"
};
// selector for your specific table cell
$('#the_table tr').each(function() {
content_cell = $(this).find("td:first");
});
// get cell content
random_words = content_cell.html();
// replace your keywords according the map
$.each(colors_map, function(index, value) {
random_words = random_words.replace(new RegExp(index, 'g'), "<font color='" + value + "'>" + index + "</font>");
});
// set back html content into the cell
content_cell.html(random_words);
});
</script>
</body>
は、お使いのブラウザのサポートHTML5を仮定し、何jQueryのは必要ではありません、次のコードを試してみてください。
をfunction renderKey(){
//create color list in case you don't want to get invisible color such as 'white' from random color..
// make the list long enough to avoid duplicated color
var colors = ['red', 'blue', 'orange', 'cyan', 'black'];
var keyColor = {};
var keyIndex = 0;
//you may need more selectors to exclude unexpected elements, e.g. <td> in <thead>.
var x = document.querySelectorAll("td");
for (i in x){
//suppose your key words seperated by ',' in <td>
var keyWords = x[i].innerHTML.split(',');
x[i].innerHTML = keyWords.reduce(
function(total, value, index){
return total + '<span style="color:' +
(keyColor[value] || (keyColor[value] = colors[ keyIndex++ % colors.length])) +
'">' + value + '</span>';
},
''
);
}
}
sulutionありがとう、私は例としてそれを使用するつもりです。私は特定の色の単語を色付けする必要があるため、たとえば、 "ペット"という単語は常に青色で表示されます。そして私のキーワードではない言葉を色付けしないでください。しかし、それが私を助けよう！ –
私はそれを例として使用します。この行について私に説明することはできますか？ "新しいフォントは、フォントの色を変更するために使用されます。" $ .each（colors_map、function（index、value）{ random_words = random_words.replace（new RegExp（index、 'g'）、 "フォント色=" "+値+" '> "+インデックス+" "）; }）; " - 私は理解していませんでした。私はcolorsMapのループをしているのですが、それは私が持っているものです。 –
$の各ハンドラ関数の中で、キーマップの色の各要素のキーと値を取得します。たびに、RegExを使ってテキスト内の「インデックス」をグローバルに（すべてのエントリ）検索しようとします。見つかった場合は、それぞれを同じ「インデックス」に置き換えますが、タグで囲みます。ここで、色はマップの「値」に設定されます。何も見つからなかった場合、イテレータ$はそれぞれ次のマップエントリに移動します。他に何かが分からない場合は教えてください。 –
説明していただきありがとうございます、私は少し変更する必要がありますと信じています。しかし、私は素晴らしい、非常に良い解決策です。あなたは本当にそれが "汚い"と思うので、私はそれをより良くすることができますか？ –