How can I highlight a word/term quicker and smarter?

Question

I have some text:

Hello world, Attack on Titan season two!

Currently, if a user wants to highlight a word/ter

Answer 1

So you are going to have to deal with text ranges and such. I've dealt with this, and it's extremely painful, especially if you have DOM contents like:

New season of Attack on Titan!

i.e. text nodes mixed with other DOM elements, such as a span in this case. With this in mind, I'd like to highly recommend the library rangy.js: https://github.com/timdown/rangy

It's saved me several days of headache when I was making a hashtag highlighting system.