JavaScriptを使用してHTMLページ内の文字列の色を変更する方法

HTMLページがあります。緑色/赤色のOK/Errorを強調表示したい
これは「オンザフライ」 javascript sniplet eg検索&交換？JavaScriptを使用してHTMLページ内の文字列の色を変更する方法

マイサンプル：

<html> 
    <head> 
     <title></title> 

    </head> 
    <body> 
    OK - Test1 Passed!<br> 
    OK - Test2 Passed!<br> 
    Error - Test3 Failed <br> 

    Some More Text... 
    </body> 

</html>

これは動作していない、しかし、私のようなものが考えた：

<script type="text/javascript"> 
document.write(document.body.replace("OK", "<font style= background-color:green>OK</font>"); 
</script>

は魔法を行う必要があります。

すべて私が見つけた強調表示や色分けの例は非常に洗練されていました。私の問題を簡単な方法で解決してくれることを願っています。あなたがここに閉じ括弧を逃した

出典

2012-01-25 icnivad

正確に何か問題がありますか？テキストをJavaScriptで置き換えるか、 'body'の内容を取得しますか？ –

私はちょうど緑の背景とエラー赤で文字列OKをしたいです。私のJavascriptのスニペットはおそらく完全な間違ったアプローチです – icnivad

以下の回答から、私はこれが簡単ではないと簡単に思っています。私はまた、私は非常に少しのHTMLのexpirienceを持っていることを証明した:-)私のテストページは、Webサーバ上で実行するつもりはなかったので、置換機能は大丈夫だろうが、ありがとうございました！ – icnivad

：

document.write(document.body.replace("OK", "<font style= background-color:green>OK</font>"));

をまた、フォントタグが減価償却され、あなたが引用符でスタイル属性の値を囲む必要があります。

document.write(document.body.replace('OK', '<span style="background-color:green">OK</span>'));

出典

2012-01-25 17:38:03 c24w

font要素がために推奨されていません年。代わりにspanを使用してください。

span要素にテキストをラップし、後でそのスタイルをJavaScriptごとに変更できます。

<span id="label1">OK</span>

それはあなたのために多くの仕事をするので、私はjQueryを使用することをお勧めします。は、例えば、要素のCSSプロパティを設定すると、このように簡単です：もちろん

$("#label1").css("background-color", "red");

、このコードは、どちらかscriptタグ内またはページに含まれる.jsファイルに入れておく必要があります。

出典

2012-01-25 17:38:33 migu

これを行うには、効率的に、強調表示されたテキストを要素の中に配置したいと思うでしょう。そうすれば、簡単にDOMを介してそれらの単語にアクセスできます。

例えば、これを取る：あなたはテスト（「OK」または「エラー」）、それの色の状態、およびステータスの応答の両方へのアクセスを提供します

<html> 
    <head> 
     <title></title> 

    </head> 
    <body> 
    <p id="test1"><span class="status">OK</span> - Test1 <span class="result">Passed!</span></p> 
    <p id="test2"><span class="status">OK</span> - Test2 <span class="result">Passed!</span></p> 
    <p id="test3"><span class="status">Error</span> - Test3 <span class="result">Failed</span></p> 

    Some More Text... 
     <script type="text/javascript"> 
      var test1Status = document.getElementById('test1').firstChild; 
      var test1Result = document.getElementById('test1').lastChild; 

      test1Status.style.color = 'green'; 
      test1Result.innerHTML = "Passsssed"; 

     </script> 
    </body> 
</html>

を（「合格」または「失敗」）。明らかに、あなたはJavaScriptのIDをハードコーディングするつもりはないでしょうが、関数を介してIDを渡すことになります。

しかし、この方法でDOM要素を操作する理由を理解するのに役立ちます。あなたはより大きなコントロールを持っており、スクリプトはもっと柔軟になります。

出典

2012-01-25 17:47:46 Tim

Document.body.replaceは重い関数です。代わりにラベルを使用する必要があります。

<html> 
<head> 
    <title></title> 

</head> 
<style> 
    .passed{background-color:green} 
</style> 
<body> 
<span class="passed">OK</span> - Test1 Passed!<br> 
<span class="passed">OK</span> - Test2 Passed! <br> 
Error - Test3 Failed <br> 

Some More Text... 
</body> 
</html>

jsでクラスを追加する。これははるかに効率的な方法です。

var body = document.getElementsByTagName('body')[0].innerHTML; 
body = body.replace(/OK/g, "<span style=\"color: red; background-color:green\">OK</span>") 
document.getElementsByTagName('body')[0].innerHTML = body;

jsFiddle例

出典

2012-01-25 17:55:24 emphaticsunshine

Relized私は、難しいラッパーをビルドするよりhtmlでスパンで作業する必要があります;） – icnivad

はい、そのような種類の問題を処理するためのより良い方法です。 – emphaticsunshine