如何突出显示 <pre> 中的特定行并根据特定单词进行迭代？

Question

我有一个文本数据，它是 pre 标记内的一组代码行，并且代码行有一些由 FAIL 指示的失败行。我有一个名为“Next Fail”的按钮，单击它时，我想突出显示 pre 标记中包含“FAIL”一词的行并对其进行迭代以突出显示其中包含“FAIL”关键字的下一行。

pre 标签内的样本数据

00:00:00 INFO SERVER-SYSTEM - Cmd Line Arg: sysName = SERVER
00:00:01 INFO SERVER-SYSTEM - Cmd Line Arg: resultsDirName = github
00:00:02 INFO SERVER-SYSTEM - Cmd Line Arg: Device4Branch = //github/server_manager01/test1
00:00:02 FAIL SERVER-SYSTEM - Cmd Line Arg: testCase = server_manager01
00:00:03 INFO SERVER-SYSTEM - Cmd Line Arg: timestamp_style = RELATIVE
00:00:04 INFO SERVER-SYSTEM - Cmd Line Arg: token = 36
00:00:04 FAIL SERVER-SYSTEM - Cmd Line Arg: Campaign = True

所以当我点击“Next Fail”按钮时，带有“FAIL”字样的行应该用红色边框突出显示，进一步点击它应该突出显示有该字的下一行。

我已编写代码以打印包含单词“FAIL”但无法突出显示并重复的行。以下是我编写的代码。

<script type="text/javascript">
    $(document).ready(function(){
      var count = 0;
        $("#next_fail").click(function(){
          var x = document.getElementById("code").textContent;
          var lines = x.split('\n');

          li = 0;
          for(i=0;i<lines.length;i++){
            x = lines[i];
            var n = x.search("FAIL");
            if (n>0)
              li = i;
          }
          alert(li);
        });


    });
</script>

请告诉我要进行哪些更改，以便通过用红色边框突出显示来遍历“FAIL”关键字。

Answer 1

您可以映射线条并添加例如一个 div 并使用 includes 跟踪哪个 id 具有单词 FAIL 并将它们添加到数组中。

if (lines[i].includes("FAIL")) indicesWithFail.push(i);

如果您想要更精确的匹配，您可以使用这一行来代替类似时间的模式，后跟 FAIL。

if (/\d+:\d+:\d+ FAIL /.test(lines[i])) indicesWithFail.push(i);

通过例如设置边框颜色来突出显示当前 div 并删除前一个的边框。

例如使用一些内联 cmets：

$(document).ready(function() {
  let indicesWithFail = [];
  let currentIndex = null;
  let lines = document.getElementById("code").innerHTML.split('\n');
  let idPrefix = "line_";
  let redBorder = "1px solid red";

  // map the entries to a div to enable styling and track the index if the line contains FAIL
  lines = lines.map((value, index) => {
    if (lines[index].includes("FAIL")) indicesWithFail.push(index);
    return `<div id='${idPrefix}${index}'>${value}</div>`;
  });

  // put the mapped content back as innerHTML of the PRE element
  document.getElementById("code").innerHTML = lines.join("\n");

  $("#next_fail").click(function() {
    if (indicesWithFail.length > 0) {
      // remove the border of the previous element
      document.getElementById(`${idPrefix}${indicesWithFail[currentIndex]}`).style.border = "";
      currentIndex++;

      // reset to loop from the start
      if (currentIndex >= indicesWithFail.length) currentIndex = 0;
      // set the border for the current element
      document.getElementById(`${idPrefix}${indicesWithFail[currentIndex]}`).style.border = redBorder;
    }
  });

  // initialize
  if (indicesWithFail.length > 0) {
    // set the start index if we have FAIL entries
    currentIndex = 0;
    // set a red border for the first entry
    document.getElementById(`${idPrefix}${indicesWithFail[currentIndex]}`).style.border = redBorder;
  }
});

pre div {
  display: inline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre id="code">
00:00:00 INFO SERVER-SYSTEM - Cmd Line Arg: sysName = SERVER
00:00:01 INFO SERVER-SYSTEM - Cmd Line Arg: resultsDirName = github
00:00:02 INFO SERVER-SYSTEM - Cmd Line Arg: Device4Branch = //github/server_manager01/test1
00:00:02 FAIL SERVER-SYSTEM - Cmd Line Arg: testCase = server_manager01
00:00:03 INFO SERVER-SYSTEM - Cmd Line Arg: timestamp_style = RELATIVE
00:00:04 INFO SERVER-SYSTEM - Cmd Line Arg: token = 36
00:00:04 FAIL SERVER-SYSTEM - Cmd Line Arg: Campaign = True
</pre>

<form>
  <input id="next_fail" type="button" value="Next">
</form>

对于较长的页面，使用 Jquery animate：

$(document).ready(function() {
  let indicesWithFail = [];
  let currentIndex = null;
  let lines = document.getElementById("code").innerHTML.split('\n');
  let idPrefix = "line_";
  let redBorder = "1px solid red";

  // map the entries to a div to enable styling and track the index if the line contains FAIL
  lines = lines.map((value, index) => {
    if (lines[index].includes("FAIL")) indicesWithFail.push(index);
    return `<div id='${idPrefix}${index}'>${value}</div>`;
  });

  // put the mapped content back as innerHTML of the PRE element
  document.getElementById("code").innerHTML = lines.join("\n");

  $("#next_fail").click(function(e) {
    e.preventDefault();
    if (indicesWithFail.length > 0) {
      // remove the border of the previous element
      document.getElementById(`${idPrefix}${indicesWithFail[currentIndex]}`).style.border = "";
      currentIndex++;

      // reset to loop from the start
      if (currentIndex >= indicesWithFail.length) currentIndex = 0;
      // set the border for the current element
      let elm = document.getElementById(`${idPrefix}${indicesWithFail[currentIndex]}`);
      elm.style.border = redBorder;
      $('html,body').animate({
        scrollTop: $(elm).offset().top - 40
      }, 'fast');
    }
  });

  // initialize
  if (indicesWithFail.length > 0) {
    // set the start index if we have FAIL entries
    currentIndex = 0;
    // set a red border for the first entry
    let elm = document.getElementById(`${idPrefix}${indicesWithFail[currentIndex]}`);
    elm.style.border = redBorder;
    $('html,body').animate({
      scrollTop: $(elm).offset().top - 40
    }, 'fast');
  }
});

#next_fail {
  position: fixed;
  height: 30px;
  top: 0;
  left: 0;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre id="code">
00:00:00 INFO SERVER-SYSTEM - Cmd Line Arg: sysName = SERVER
00:00:01 INFO SERVER-SYSTEM - Cmd Line Arg: resultsDirName = github
00:00:02 INFO SERVER-SYSTEM - Cmd Line Arg: Device4Branch = //github/server_manager01/test1
00:00:02 FAIL SERVER-SYSTEM - Cmd Line Arg: testCase = server_manager01
00:00:03 INFO SERVER-SYSTEM - Cmd Line Arg: timestamp_style = RELATIVE
00:00:04 INFO SERVER-SYSTEM - Cmd Line Arg: token = 36
00:00:04 FAIL SERVER-SYSTEM - Cmd Line Arg: Campaign = True
00:00:00 INFO SERVER-SYSTEM - Cmd Line Arg: sysName = SERVER
00:00:01 INFO SERVER-SYSTEM - Cmd Line Arg: resultsDirName = github
00:00:02 INFO SERVER-SYSTEM - Cmd Line Arg: Device4Branch = //github/server_manager01/test1
00:00:02 FAIL SERVER-SYSTEM - Cmd Line Arg: testCase = server_manager01
00:00:03 INFO SERVER-SYSTEM - Cmd Line Arg: timestamp_style = RELATIVE
00:00:04 INFO SERVER-SYSTEM - Cmd Line Arg: token = 36
00:00:04 FAIL SERVER-SYSTEM - Cmd Line Arg: Campaign = True
00:00:00 INFO SERVER-SYSTEM - Cmd Line Arg: sysName = SERVER
00:00:01 INFO SERVER-SYSTEM - Cmd Line Arg: resultsDirName = github
00:00:02 INFO SERVER-SYSTEM - Cmd Line Arg: Device4Branch = //github/server_manager01/test1
00:00:02 FAIL SERVER-SYSTEM - Cmd Line Arg: testCase = server_manager01
00:00:03 INFO SERVER-SYSTEM - Cmd Line Arg: timestamp_style = RELATIVE
00:00:04 INFO SERVER-SYSTEM - Cmd Line Arg: token = 36
00:00:04 FAIL SERVER-SYSTEM - Cmd Line Arg: Campaign = True
00:00:00 INFO SERVER-SYSTEM - Cmd Line Arg: sysName = SERVER
00:00:01 INFO SERVER-SYSTEM - Cmd Line Arg: resultsDirName = github
00:00:02 INFO SERVER-SYSTEM - Cmd Line Arg: Device4Branch = //github/server_manager01/test1
00:00:02 FAIL SERVER-SYSTEM - Cmd Line Arg: testCase = server_manager01
00:00:03 INFO SERVER-SYSTEM - Cmd Line Arg: timestamp_style = RELATIVE
00:00:04 INFO SERVER-SYSTEM - Cmd Line Arg: token = 36
00:00:04 FAIL SERVER-SYSTEM - Cmd Line Arg: Campaign = True
00:00:00 INFO SERVER-SYSTEM - Cmd Line Arg: sysName = SERVER
00:00:01 INFO SERVER-SYSTEM - Cmd Line Arg: resultsDirName = github
00:00:02 INFO SERVER-SYSTEM - Cmd Line Arg: Device4Branch = //github/server_manager01/test1
00:00:02 FAIL SERVER-SYSTEM - Cmd Line Arg: testCase = server_manager01
00:00:03 INFO SERVER-SYSTEM - Cmd Line Arg: timestamp_style = RELATIVE
00:00:04 INFO SERVER-SYSTEM - Cmd Line Arg: token = 36
00:00:04 FAIL SERVER-SYSTEM - Cmd Line Arg: Campaign = True
00:00:00 INFO SERVER-SYSTEM - Cmd Line Arg: sysName = SERVER
00:00:01 INFO SERVER-SYSTEM - Cmd Line Arg: resultsDirName = github
00:00:02 INFO SERVER-SYSTEM - Cmd Line Arg: Device4Branch = //github/server_manager01/test1
00:00:02 FAIL SERVER-SYSTEM - Cmd Line Arg: testCase = server_manager01
00:00:03 INFO SERVER-SYSTEM - Cmd Line Arg: timestamp_style = RELATIVE

</pre>

<form>
  <input id="next_fail" type="button" value="Next Fail">
</form>