Javascript讀取.txt文件並以HTML顯示

Question

我正在嘗試從同一目錄中的.txt文件（status.txt）中讀取HTML頁面上的JavaScript，並根據.txt文件中的信息以兩種不同的字體顏色顯示內容。 目前，我可以在頁面上很好地顯示文本，但是我想使其更加引人注目。 這是我當前的代碼，以基本的#ccc十六進制顯示文本。

<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

唯一改變的是時間戳。 我希望文本顯示為“（timestamp）腳本已停止”時顯示為紅色，而顯示為“ timestamp）腳本已開始時顯示為綠色。 如果有人可以幫助，那就太好了！

Answer 1

您可以使用簡單的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 

Answer 2

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