Javascript讀取.txt文件並顯示在HTML中

我試圖讓我的HTML頁面上的JavaScript從同一目錄中的.txt文件（status.txt）中讀取，並基於兩種不同的字體顏色顯示內容信息在.txt文件中。我目前已經在頁面上顯示文本，但我想讓它更明顯些。這是我當前的代碼，用基本的#ccc十六進制顯示文本。Javascript讀取.txt文件並顯示在HTML中

<script type="text/javascript"> 
    loadXMLDoc(); 
</script> 
<script type="text/javascript"> 
    function loadXMLDoc() { 
    var xmlhttp; 
    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     document.getElementById("status").innerHTML = xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET", "status.txt", true); 
    xmlhttp.send(); 
    } 
</script> 

<h3 id="status" style="padding-right: 7px; padding-left: 7px; margin-top: 2px; font-size: 11px; color: #cccccc"> 
    Status 
</h3>

每次運行.vbs文件時都會覆蓋文本文件的內容。它要麼說：

6/11/2016 8:58:30 AM Script Started

或

6/11/2016 9:31:12 AM Script Stopped

改變是時間戳的唯一的事。我希望文本在顯示「（時間戳）腳本停止」時顯示爲紅色，並在顯示「時間戳記」腳本啓動時顯示爲綠色。如果有人能夠幫助，那會很棒！

來源

2016-06-11 Cory

var color = xmlhttp.responseText.indexOf('Started') !== -1 ? 'green' : 'red'; 
document.getElementById("status").innerHTML = '<span style="color: ' + color + '">' + xmlhttp.responseText + '</span>';

來源

2016-06-11 15:12:58

這工作完美。感謝Yotam！ – Cory

您可以使用簡單的RegEx將正確的類添加到文本中。

document.getElementById("status").innerHTML = xmlhttp.responseText 
    .replace(/(\b\d.+?Started)/ig,'<span class="start">$1</span>') 
    .replace(/(\b\d.+?Stopped)/ig,'<span class="stop">$1</span>'); 
    //\b -start of word, \d - any digit 0 to 9, . - any character 
    // +? - one ore more, not greedy

來源

2016-06-11 15:10:44

這也當過好，我只看到了他的第一次。謝謝Alex！ – Cory

我假設您的Feed包含「已啓動」和「已停止」狀態。 –

Javascript讀取.txt文件並顯示在HTML中

回答

相關問題