Javascript 如何突出显示内部的特定行<；预处理>；并根据特定单词进行迭代？

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

预标记内的示例数据

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

因此，当我点击“下一个失败”按钮时，包含“失败”单词的行应该用红色边框突出显示，进一步点击时，它应该突出显示包含该单词的下一行

我已经编码打印了一行字“失败”，但无法突出显示它和iter。以下是我编写的代码

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

$（文档）.ready（函数（）{
var计数=0；
$（“#下一个#u失败”）。单击（函数（）{
var x=document.getElementById（“代码”）.textContent；
变量行=x.split（'\n'）；
li=0；
对于（i=0；i0）
li=i；
}
警惕（李）；
});
});

---

请务必让我知道，要通过用红色边框突出显示来覆盖“FAIL”关键字，需要做哪些更改。

您可以映射这些行，例如添加一个div，并跟踪使用FAIL一词的id，并将其添加到数组中

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

如果您想要一个更精确的匹配，您可以使用这一行，而不是使用一个类似时间的模式，后跟FAIL

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

高亮显示当前div，例如设置边框颜色并删除上一个div的边框

例如，使用一些内联注释：

$（文档）.ready（函数（）{
让指示WithFail=[]；
让currentIndex=null；
让line=document.getElementById（“代码”）.innerHTML.split（'\n'）；
让idPrefix=“line_u2;”；
让redBorder=“1px实心红色”；
//将条目映射到div以启用样式设置，并在该行包含FAIL时跟踪索引
行=行。映射（（值、索引）=>{
if（行[index].includes（“FAIL”）指示WITHFAIL.push（索引）；
返回`${value}`；
});
//将映射的内容作为PRE元素的innerHTML放回
document.getElementById（“代码”）.innerHTML=lines.join（“\n”）；
$（“#下一个#u失败”）。单击（函数（）{
如果（指示WithFail.length>0）{
//删除上一个元素的边框
document.getElementById（`${idPrefix}${indicesWithFail[currentIndex]}`）style.border=“”；
currentIndex++；
//从一开始就重置为循环
如果（currentIndex>=IndicatesWithFail.length）currentIndex=0；
//设置当前元素的边框
document.getElementById（`${idPrefix}${indicesWithFail[currentIndex]}`）style.border=redBorder；
}
});
//初始化
如果（指示WithFail.length>0）{
//如果有失败条目，请设置开始索引
currentIndex=0；
//为第一个条目设置红色边框
document.getElementById（`${idPrefix}${indicesWithFail[currentIndex]}`）style.border=redBorder；
}
});
pre-div{
显示：内联；
}

00:00:00信息服务器-系统-命令行Arg:sysName=SERVER
00:00:01信息服务器-系统-命令行Arg:resultsDirName=github
00:00:02 INFO SERVER-SYSTEM-Cmd行Arg:Device4Branch=///github/SERVER\u manager01/test1
00:00:02服务器-系统失败-命令行Arg:testCase=SERVER\u manager01
00:00:03信息服务器-系统-命令行Arg:timestamp\u style=RELATIVE
00:00:04信息服务器-系统-命令行Arg:token=36
00:00:04服务器系统故障-命令行Arg:Campaign=True
pre中的内容可能有多行，因此为了自动向下滚动到突出显示的行，需要进行哪些编辑？多行是什么意思？这些行是包含FAIL right的单行？如果pre tag中有100多行内容，则会有滚动条，因此如果FAIL关键字位于末尾，当单击Next按钮时，它会自动向下滚动到突出显示的行。那么，如何实现这一目标呢？@AbhishekBhandari您可以使用Jquery scrollTop等工具。我添加了另一个代码示例。