javascript - 在网站上打开的文本文件上突出显示具有不同颜色代码的特定单词-6ren

javascript - 在网站上打开的文本文件上突出显示具有不同颜色代码的特定单词

转载作者：行者123 更新时间：2023-12-05 00:29:17

我不是程序员(但尝试为我的日常工作创建小型编程解决方案)。
这一次我试图构建一个日志分析器，当它在浏览器上打开时，它将突出显示日志文件(.txt)上的特定关键字。
日志文件将位于日志服务器上，并具有特定的 URL。
我想在日志分析器页面上使用该 URL 并打开该文本文件，一旦加载了文本文件，javascript 将突出显示我在 javascript 上提到的关键字(静态)。
我尝试使用 mark.js 解决方案。

<body>
    <h1>My First Heading</h1>
    <p>Lorem ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, nò sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie çonsequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit prāesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet</p>

    <script>
        var instance = new Mark(document.querySelector("body"));
        instance.mark(["ipsum", "lorem"], {
               "accuracy": "exactly"
        });
        $('mark').css({'background':'transparent' , 'color':'yellow'});
    
    </script>

</body>

但是 mark.js 只提供了用单色代码突出显示单词的选项(在上面的代码中我使用了黄色)，但我希望关键字用不同的颜色突出显示，例如 信息关键字以黄色突出显示，错误关键字以红色突出显示，成功关键字以绿色突出显示 .我可以在这里使用什么解决方案来实现我的目标？任何帮助表示赞赏。
还有我如何使用 URL 打开文本文件并让 JS 处理它。我尝试了 HTML OBJECT 标记，但随后 javascript 无法处理它(未突出显示)。

最佳答案

我的解决方案是没有 Mark js:
步骤 1. 获取段落的 HTML 内容。
步骤 2. 使用正则表达式在原始文本中查找值。
步骤 3. 用添加的文本替换原始文本 span dom 元素。

const text = document.querySelector("p");
const input = document.querySelector("input");
const button = document.querySelector("button");
const originalTxt = text.innerHTML;

button.addEventListener("click", (e) => {
  e.preventDefault();
  mark();
});

function mark() {
  const inputValue = input.value;
  const regex = new RegExp(inputValue, "gi");
  text.innerHTML = originalTxt.replace(
    regex,
    `<span style="color:red;">${inputValue}</span>`
  );
}

<input type="text" />
<button>Mark!</button>
<h1>My First Heading</h1>
<p>Lorem ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, nò sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie çonsequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit prāesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet
</p>

关于javascript - 在网站上打开的文本文件上突出显示具有不同颜色代码的特定单词，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71846152/