Question

我正在尝试在我的HTML页面上从同一目录中的.txt文件（status.txt）读取JavaScript，并根据.txt文件中的信息以两种不同的字体颜色显示内容。我目前在页面上显示文本就好了，但我想让它更加引人注目。这是我当前使用基本#ccc hex。

显示文本的代码

<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）Script Stopped”时显示为红色，在显示“timestamp”Script Started时显示为绿色。如果有人能提供帮助，那就太好了！

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

Javascript读取.txt文件并以HTML格式显示

2 个答案: