Highlight keywords on the webpage | JavaScript Interview question - 57

[@jagjitsingh-mk1ev]

Incase some one is thinking of how to show it in the UI
const parser = new DOMParser();
const htmlString = "Beware of the leopard";
const doc3 = parser.parseFromString(htmlString, "text/html");
console.log(doc3.body.firstChild.textContent) // Beware of the leopard

[@SachinYadav-eh7vg]

Nice problem thank you

[@abd11868]

Nice Content. Just one edge case I guess missed here , For “JavaScript” I had give in input [“Java”, “Script”, “JavaS”].
It gave the output “JavaS” in side the strong tag but it should give “JavaScript” in strong tag.
For that I think , in else condition if we found both prefix & suffix, we should immediately return the output.
correct me if I am wrong

[@Learnersbucket]

Yes, that should be the case

[@Whirlwind03]

Did it using string replace, but not sure if it's the right method or the interviewer will allow it, but i guess your approach is much better.
function help(str,words) {
words.forEach(word => {
str = str.replace(word,`${word}`)
});
str = str.replaceAll("","");
return str;
}
const str = "Hello FrontEndMasters";
const words = ["End","Front","Masters"]
const htmlString = help(str,words);
console.log(htmlString);

[@mohithguptakorangi1766]

where is the full editor problem video, could not find it?

[@Learnersbucket]

HTML encoding of string

[@mohamedsharbudeen6584]

Nice content. This case can only split words into two halves and check for match. Might fail for below test,
"Hello FrontEndMasters" ["Front", "End", "Masters"]
Below code can help in getting the ranges in else case,
let x = Number.MAX_SAFE_INTEGER;
let y = Number.MIN_SAFE_INTEGER;
for (let i = 0; i < keywords.length; i++) {
if (word.includes(keywords[i])) {
x = Math.min(x, word.indexOf(keywords[i]));
y = Math.max(y, word.indexOf(keywords[i]) + keywords[i].length);
}
}
if (x < y) {
output =
word.slice(0, x) +
"" +
word.slice(x, y) +
"" +
word.slice(y);
}

[@Learnersbucket]

Looks good, though I haven't run and checked it.