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

我不是程序员(但尝试为我的日常工作创建小型编程解决方案(。这一次，我试图构建一个日志分析器，当在浏览器上打开日志文件(.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。将原始文本替换为添加了文本的spandom元素。

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>

我在没有mark.js的情况下完成了这项工作。代码被注释，检查这是否是你想要的？基本上，我在数组["ipsum"，"lorem"]中找到了所有出现的单词，并且我在具有类颜色的元素内将该单词切换为同一个单词。

//function to replace word for element with class
function switchKeyWordsToElement(words, color){  
var text = document.querySelector("p").innerHTML

for(var i = 0; i < words.length; i++){
var finalText = text.split(words[i]).join('<span class="' + color + '">' + words[i] + '</span>');
text = finalText
}
//add to <p></p> final text
document.querySelector("p").innerHTML = text
}
//lists of words to search
const yellowWords = ["ipsum", "Lorem"]
const redWords = ["sit", "elitr"]
//switch yellow words
switchKeyWordsToElement(yellowWords, 'yellow')
//switch red words
switchKeyWordsToElement(redWords, 'red')

.red{
color: red;
}
.yellow{
color:yellow;
}

<html>
<head>
</head>
<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>
</body>
</html>

您将不得不依赖css类来设置样式

然后在适当的调用中将类传递给CCD_ 3字典中的CCD_。我们可以使用一个对象并链式调用mark()方法，如下所示：

// create Mark.js instance
var marker = new Mark('body')
// create lists for easy updating of search terms
info_words = ['lorem', 'ipsum']
err_words = ['sit','et']
success_words = ['dolor','te']
// chain mark method calls together
marker.mark(info_words,{accuracy:'exactly'})
.mark(err_words, {
accuracy:'exactly',
className:'err'
})
.mark(success_words, {
accuracy: 'exactly',
className:'success'
})

.err
{
color: white;
background-color: red;
}
.success
{
color: white;
background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
<html>
<head>
</head>
<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>
</body>
</html>

相关内容

最新更新

热门标签：