Apply CSS background color only to the word set in the paragraph in the text box

Question

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

Answer 1

There is no way (what I know) to do this using pure HTML and CSS. You will need to use JavaScript.

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

Option 2 Throw yours. You would like to use the search () function to find the location of words, and then add 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 provide more flexibility in what you highlight. It also allows you to avoid jQuery if it is not your cup of tea.

Answer 2

The only way I can do this is to wrap the required text in some html to style it. For this, I get a separate textarea text output, see here: http://jsfiddle.net/mhPGc/8/

Answer 3

You use the span tag for this problem, you first set the id for the text area, then use this style code

 #textarea span{ background:url(img.jpg) or #etc; }