While developing the Tag Cloud Extension for Chrome I came across the idea to add a nice feature: custom highlighting for the tags, so that they could be easily spotted in their original context. It sounded a very useful feature to have, so I decided to actually implement it. Working on the problem I realized very early that the challenge was quite more complex than one could think, hence, in an effort to avoid wasting a lot of energy to reinvent the wheel (being a huuuuge fan of modularization and software reuse ^_^), I decided to look for a library - or even better a jQuery plugin - that provided text highlighting functionalities in a HTML document.
I found several matching results, and I spent a few days evaluating them and trying them out, but all of those libs were largely unsatisfactory and had buggy implementations. When I was about to give up, I finally stumbled upon the highlight.js jQuery plugin by Johann Burkard: Finally an excellent, working solution, the best I could ever find and even desire. This one the only one perfectly working solution I could find, an impressive job, really.
The funny thing is, I later realized it was too part of a Tag Cloud lib, DynaCloud.
Nonetheless, even this nice plugin lacked a few features I needed to use it in my extension project, but it represented a very good basis to start with, so I decided to extend it, and here it is what I came up with.
Besides a little refactoring of the code, the main differences are:
The text to highlight can be expressed as a pattern, or better its string representation (as in "\w*" or "\d+", for example);
It can be chosen to highlight only whole words exactly matching the pattern;
The CSS class assigned to the highlighted text is specified in each and every call, and thus different styles can be applied to different highlighted keyword or patterns in each page;
removeHighlight takes the name of the class associated with the highlighting to remove as a parameter, so that, if more than one category (i.e. style) has been used, removal can be limited to single categories.
Highlighted text can be associated with up to two different classes of highlighting: our recommendation is to use a general class not associated with css rules (parameter highlightClassName ) to identify highlighting-related span tags in the document, and a second specific class (parameter specificClassName ) to actually style the individual patterns highlighted (as said above, each pattern can be styled differently this way). This solution, together with the flexibilty of our version of removeHighlight, allow to remove all highlighting with one single call ( removeHighlight(highlightClassName) ) or single highlight categories individually.
Of course the credit goes mostly to Johann for the great work he did on its version.