Highlight a word in a webpage

Asked Nov 18 '15 at 12:29

Active Nov 18 '15 at 12:36

Viewed 82 times

    function highlight(container,what) {
    var content = container.innerHTML,
        pattern = new RegExp('(>[^<.]*)(' + what + ')([^<.]*)','g'),
        replaceWith = '$1<span style="background-color:red">$2</span>$3',
        highlighted = content.replace(pattern,replaceWith);
    return (container.innerHTML = highlighted) !== content;
 }

Above is the function written to highlight a specific word in the whole web page.

I am using it is

 highlight(document.body,"the");

And it works. If it is found any word, it makes it red background. The problem now is, once I run the functions, the javascript stops working on web pages.

Can someone help me to sort the problem. My guess is that the regex have issues. I am new to regex.

Thanks for any help.

edited Nov 18 '15 at 12:36

asked Nov 18 '15 at 12:29

Suresh Atta

120,458
37
198
307

Does the actual function highlight() run more than once? – bestprogrammerintheworld Nov 18 '15 at 12:32
@bestprogrammerintheworld only once after the page got loaded – Suresh Atta Nov 18 '15 at 12:33
How does your actual call to the function look like? – bestprogrammerintheworld Nov 18 '15 at 12:34
why dont you just replace the word only like new RegExp(what,'g'); – Nouphal.M Nov 18 '15 at 12:35
Have you tried looking into something like https://github.com/NYTimes/Emphasis – Tim Sheehan Nov 18 '15 at 12:36
1

Several issues I see: 1) there can be several `the` in-between `>` and `<`, and you will only replace one, 2) the `[^<.]*` will choke on a substring that contains literal periods as `.` inside the character class is a literal period. Did you take a look at *possible duplicate...*? – Wiktor Stribiżew Nov 18 '15 at 12:39

Highlight a word in a webpage

0 Answers0