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

I am not a programmer(but try to create small programming solution for my day to day work). This time I am trying to build a log analyzer which 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

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

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

</script>
</body>

</html>

but mark.js only gives option to highlight words with single color code(in 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 html OBJECT tag but then the javascript was not working on it(not highlighting).

CodePudding user response：

My solution is without Mark js:

Step 1. get the HTML content of the paragraph. Step 2. split it into words. Step 3. find the words, and add into a span. Step 4. join the words into a text again. Step 5. Add back the new content to tha paragraph.

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

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

function mark() {
  const words = text.innerHTML.split(" ");
  text.innerHTML = words.map((word)=>{
    if (word == input.value) {
      console.log("found");
      return `<span style="color:red;">${word}</span>`;
    } else {
      console.log("nope");
      return word;
    }
  }).join(" ");
  
}

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

CodePudding user response：

You will have create an separate instance of Mark.js to manually color each keyword, for example:

// create your instance
const info = new Mark(document.querySelector("body"));
const err = new Mark(document.querySelector("body"));
// const other_instances = new Mark(document.querySelector("body"));

// mark info keywords
info.mark(["ipsum", "lorem"], {
           "accuracy": "exactly"
});
$('mark').css({'background':'transparent' , 'color':'yellow'});

// mark error keywords
err.mark(["sit", "elitr"], {
           "accuracy": "exactly"
});
$('mark').css({'background':'transparent' , 'color':'red'});

/* mark other keywords...
other_instances.mark([], {
           "accuracy": "exactly"
});
$('mark').css({'background':'transparent' , 'color':'blue'});

*/

to open the url:

const open = require('open')
open('www.google.com')

all together now

const open = require('open')
let url = 'www.yourwebsite.com'
open(url)

const info = new Mark(document.querySelector("body"));
const err = new Mark(document.querySelector("body"));

info.mark(["ipsum", "lorem"], {
           "accuracy": "exactly"
});
$('mark').css({'background':'transparent' , 'color':'yellow'});

err.mark(["sit", "elitr"], {
           "accuracy": "exactly"
});
$('mark').css({'background':'transparent' , 'color':'red'});