div内のhtml単語に色を変更する方法

-2

私のdiv内の単語の色を変更する必要があります。それはdinamically、DBに読んで、私のdivのIDを介して書き込むjavascript関数があります。私は成功せず、単語INFO（のみINFO）を色しようとしています：div内のhtml単語に色を変更する方法

$("div:contains('INFO')").each(function() { 
 
    $(this).html($(this).html().replace("INFO", "<span class='green'>INFO</span>")); 
 
}); 
 

 

 
/* THis is only an example*/ 
 

 
document.getElementById('textLog').innerHTML ="Load[DB]: INFO";

.green { 
 
\t color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div class="menuLog"> 
 
\t \t <div class="log"> 
 
\t \t \t <h3 class="textStyle">Log</h3> 
 
\t \t \t <div id="textLog" class="silverStyle" name="textLog" required></div><br> 
 
\t \t </div> 
 
\t </div>

出典

2017-09-04 Frank Pentangeli

-2

私が読んで、すべてあなたが役立ちますが、誰もが私の質問を満たしていなかった、誰かがそれを解決するためにの近くに行きましたが、問題は常に、1つの単語だけ、あなたの例が着色同じだったので、私は変更しました登場人物：

$('#textLog').html('INFO start <br> INFO loadDB <br> WARN connection <br> ERROR DB not exist'); 
 
changeColor(); 
 

 

 
function changeColor() { 
 
\t $('div:contains("INFO")').html(function() { 
 
\t  return $(this).html().replace(/INFO/g, "<span  style='color:green'>INFO</span>"); 
 
\t }); 
 
    \t $('div:contains("WARN")').html(function() { 
 
\t  return $(this).html().replace(/WARN/g, "<span  style='color:orange'>WARN</span>"); 
 
\t }); 
 
    \t $('div:contains("ERROR")').html(function() { 
 
\t  return $(this).html().replace(/ERROR/g, "<b><span  style='color:red'>ERROR</span></b>"); 
 
\t }); 
 
    
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="textLog" class="silverStyle" name="textLog" required></div><br>

出典

2017-09-05 13:04:00

これで問題は解決しますか？ –

はい私はそれを解決しました –

これは以前の回答とほとんど同じですが、問題が解決したらそれを選択する必要があります –

はこれを試してみてください。

function changeColor() { 
 
    $("span:contains('Info')").css("color", "green"); 
 
} 
 

 
document.getElementById('textLog').innerHTML = "<span>Info<span>"; 
 
document.getElementById('textLog1').innerHTML = "<span>Info<span>"; 
 
document.getElementById('textLog2').innerHTML = "<span>Info<span>"; 
 

 
//This part emulates the data loading 
 
//setTimeout(function(){ 
 
// console.log('Data populated....'); 
 
// //when finished you must call the function 
 
// changeColor(); 
 
//; }, 500); 
 

 
changeColor();

.green { 
 
\t color: green; 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>contains demo</title> 
 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
</head> 
 
<body> 
 

 
<div id="textLog" class="silverStyle" name="textLog" required></div> 
 
<div>TEST</div> 
 
<div id="textLog1" class="silverStyle" name="textLog" required></div> 
 
<div id="textLog2" class="silverStyle" name="textLog" required></div> 
 

 
</body> 
 
</html>

あなたは機能情報仕上がりを埋めることときにそれを行う、色を変更するchangeColor（）メソッドを呼び出す必要があります。

出典

2017-09-04 15:03:43

のみ最初の項目...解決していないすべての –

@FrankPentangeliこの一色！ –

この色すべての行、私は単語（単語を読む）を頼む、単語だけ –

すでにやろうとしているとして、あなたは言葉だけINFOのためのhtmlの交換を使用し、その後、必要なテキストが含まれている要素をつかむことができます：検出されたすべての余分な要件に基づいて、フィドル更新

$('div:contains("INFO")').html(function() { 
    return $(this).html().replace(/INFO/g, "<span style='color: green'>INFO</span>"); 
});

コメントで：https://jsfiddle.net/bL24mw97/

出典

2017-09-04 15:07:22 DimitrisCSD

divに単語....例：

INFO

が含まれている場合にのみ、この機能は私の場合ではなく、単語がjavscriptによって「挿入」されているので実行されませんこのように –

私はあなたが欲しいものを正確に理解しているかどうかはわかりませんが、私は答えを更新しました。見てみましょう。あなたが緑色にしたい単語だけを変更します。 – DimitrisCSD

単純な単語に色を付けることはできません。例に入れたスパンのようなものに入れなければなりません。 –

div内のhtml単語に色を変更する方法

答えて

関連する問題