Apply CSS background color only on a set of words in a paragraph within a textarea

Question

I have a textarea with some lines of text. The text contains alpha, numeric and special characters. I would like to apply CSS background colors on only some words (just to highlight them) within that text. For example, apply background color to only numbers in the textarea. Please let me know how to accomplish this. Suggestions are appreciated.

Answer 1

There is no way (that I know of) to do this using pure HTML and CSS. You're going to have to use some JavaScript.

Option 1 Use an existing jQuery plugin. A quick search led me to this and the updated plugin here.

Option 2 Roll your own. You would want to consider using the search() function to find the location of the words, then adding span wrappers around the words.

<style>.highlighted{background-color:yellow;}</style>
...
<span class="highlighted>HIGHLIGHT ME</span>

The only real advantage of this is that you can use regular expressions to allow for more flexibility in what you're highlighting. It also allows you to avoid jQuery if it's not your cup of tea.