CODEWITHSUNDEEP
htmltextarea
Baz
Baz

Reputation: 13125

Set word background color in textarea

I wish to highlight words and phrases in a textarea with different colors, like this:

enter image description here

How would you recommend I do this? If its not possible with a textarea, what would you recommend instead?

My application will use this text area to enable the client to enter a short story. Words and phrases will be colored based on their frequency, by the application. I will store all the words from the text area in an array, for example the text:

"Once upon a time, I met a woman called Nora. She was "

will be represented internally as:

"once", "upon", "a", "time", "i", "met", "a", "woman", "called", "nora", "she", "was". This array will then be used when applying the appropriate colors.

I will inquire about an efficient way of updating the array as the text changes via a separate question, but please keep this in mind when answering this question.

Upvotes: 1

Views: 1471

Answers (2)

Amogh Talpallikar
Amogh Talpallikar

Reputation: 12184

Display all of your text from array into a div element.

For each element you wish to be selected, wrap the text inside of a span element.

Set the background color for the span element based on what color you want.

Upvotes: 0

Jared
Jared

Reputation: 3016

A textarea might be the wrong way to do it.

I suggest using an ordinary division or similar element, then wrap what you want to highlight in a <span> with a class for each colour. You can enable contenteditable to allow the user to edit the text inside the element.

Example:

<div contenteditable="true">
    This is some text. I am <span class="blue">highlighting it</span>. It's <span class="yellow">pretty obvious</span> isn't it?
</div>

If you want the textarea appearance, in your CSS just apply your style to both textareas and this element.

Upvotes: 2

Related Questions