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>';