Highlight specific words with different color codes on a text file opened on a website

user_18711027 0
Viewed 110

I am not a programmer (but try to create small programming solutions for my day-to-day work). This time I am trying to build a log analyzer that will highlight specific keywords on the log file(.txt) when it is opened on a browser. The log file will be on a log server and will have a specific URL. I want to use that URL on the log analyzer page and open that text file, once the text file is loaded the javascript will highlight the keywords that I have mentioned(static) on the javascript.

I tried using mark.js solution.

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

But mark.js only gives the option to highlight words with single-color code(in the above code I used yellow) but I want the keywords to be highlighted with different colors like for example the info keywords highlighted with yellow, error keywords highlighted with red and success keywords highlighted with green. What solution I can use here to accomplish my goal? any help is appreciated.

Also how I can open a text file using the URL and make the JS work on it. I tried the HTML OBJECT tag but then the javascript was not working on it (not highlighting).

html javascript
3 Answers

My solution is without Mark js:

Step 1. get the HTML content of the paragraph. Step 2. use Regular Expressions to find the value in the original text. Step 3. replace the original text with a text added span dom element.

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>

user_138042560

You will have to rely on css classes for styling

then pass the class to the className attribute in the options dictionary in the proper call. We can use one object and chain call the mark() method as follows: 

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

user_172725990

I did it without mark.js . The code is commented check if is this what you want? Basically i found all occurences of words in the array ["ipsum", "lorem"] and i switch the word for the same word inside a element with class color.

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

user_188369770
Related