Easy way to implement highlight with a bg color and changing font color?

[pjfsilva]

I have a textarea where I want to highlight some text to have a black background and white font color for that words.

I've thought a bit about this and looked into a lot of jquery highlight textarea plugins and it seems this it really not a trivial task...
I could use a full featured text editor like Ace but that's really a bit too much for my needs :)

Anyone has any ideas how to achieve this easily?

[pjfsilva]

I can contribute a bit further on my ideas:

• One alternative is to remove the textarea and just a div with contenteditable. That has some drawbacks because then you have to parse the HTML on the backend to remove it and just get the text. Another one is if people copy-paste rich text (with images for example) they will pasted as rich text and not just plain text
• setting a higher z-index on the highlighter div and setting the textarea with a lower z-index and color transparent. Problem here is the text "caret" also becomes transparent which is really no good. [you can add a text caret with more JS code: http://stackoverflow.com/questions/11516736/how-to-have-transparent-fonts-except-for-the-text-caret-in-a-textarea ]
• just removing the textarea text and use just the text on the highlighter div. Problem here is the text cursor would not be at the correct place...

[alariva]

👍 Met the same need