HTMLページ全体の特定の単語の色を変更する - テキストファイル（.txt）のデータ

HTMLページ全体で単語Up（緑）と下（赤）のテキストの色を変更したいとします。しかし、これらの単語を含むデータはテキストファイルから取り出され、変更されます。私はHTMLファイルの外からデータを引っ張っているときに、どのようにテキストの色を変えることができるのか分かりません。HTMLページ全体の特定の単語の色を変更する - テキストファイル（.txt）のデータ

jQueryスクリプトで試したことがありますが、失敗しています。私はjQueryについてほとんど知らないので、スクリプト作成に間違いがあるかもしれません。

HTML：以下の条件が満たされた場合にのみ、

<!DOCTYPE html> 
<html> 
<head> 
<title>Ping Results</title> 
<meta http-equiv="refresh" content="10" > 
</head> 
<!-- Styles --> 
<style style="text/css"> 
body { 
    background-image: url("https://designnavigator.daimler.com/files/images/Daimler/basic_elements/Buerstung_Abb_00.png"); 
    background-position: 50% 50%; 
    background-repeat: repeat; 
} 
</style> 

<body> 

<script language="jQuery"> 
(function($) { 
    var thePage = $("body"); 
    thePage.html(thePage.html().replace(/(^.*\b(Down)\b.*)$/igm, 
    '<span style="color:red;font-weight: bold;">$1</span>')); 
    })(jQuery); 
</script> 

<script language="jQuery"> 
(function($) { 
    var thePage = $("body"); 
    thePage.html(thePage.html().replace(/(^.*\b(Up)\b.*)$/igm, 
    '<span style="color:green;font-weight: bold;">$1</span>')); 
    })(jQuery); 
</script> 

<h3>&nbsp; Client Pings - Up or Down</h3> 
<div id="list"> 
    <p><iframe src="Results.txt" frameborder="40" height="500" 
     width="95%"></iframe></p> 
</div> 

</body> 
</html>

出典

2017-01-27 Vandal

次作品：

iframe内にロードされたファイルは、ドメインから提供される（same origin policy）
テキストファイル実際にはhtmlファイルです（または、少なくともサーバーはMIMEタイプtext/htmlのテキストファイルを配信します）。これは、iframeがテキストを囲む<pre>タグを持つ純粋なテキストファイルをレンダリングし、テキスト内のタグは色やその他のものを変更しないためです。

$('#frame').on('load', function() { 
 
    frame_body = $('#frame').contents().find('body'); 
 
    replaced_content = frame_body.html().replace(/\b(down)\b/igm, '<span class="down">$1</span>').replace(/\b(up)\b/igm, '<span class="up">$1</span>'); 
 
    frame_body.html(replaced_content); 
 
    frame_body.find('.up').css('color', '#0f0'); 
 
    frame_body.find('.down').css('color', '#f00'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<iframe id="frame" width="100%" src="text.html"></iframe>

appens何：

は、読み込みが完了するために、フレームに待ってください。
iframeの本文にアクセスします。
クラスで周囲のスパンを追加します。
使用するクラスにスタイルを適用します。

出典

2017-01-27 07:44:58 Jens

ありがとうございますが、私はスニペットを実行するたびにエラー404が表示されます。何かが不足している可能性がありますが、これを私が欲しいものにすることができません。 – Vandal

ファイルtext.htmlはstackoverflowのサーバーにないので、404エラーがあります。コードを変更してサーバー上で使用する必要があります。私は鉱山で試しましたが、それはうまく動作します。 – Jens

HTMLページ全体の特定の単語の色を変更する - テキストファイル（.txt）のデータ

答えて

関連する問題