Highlight overlapping text in JQuery

Question

I've got this plain HTML:

"Many things are in my room: a bed, a desk, and a computer."

And these phrases:

"things are"
"are in my room" 
"room: a bed"

In JQuery, is there some way to loop through the phrase list, and highlight the phrases as they appear in the text, and have the overlap delineated by color, or border, etc?

I know there are simple highlighters but that won't do the trick. Maybe something with overlaying opacities? Thanks!

Answer 1

Unfortunately none of the highlighters I know can do what you are asking, specially because the HTML is simply plain text.

Move advanced highlighters would simply condense the three separated chunks into a single unity and highlight everything.

If you really need to do something like that you could get each chunk and compare if it has any overlapping. Then if it has, remove the overlapping part from each chunk and create a new "overlapped" highlight, if that makes sense.