change font color of a part of text in TextArea

Question

I am using actionsript 3 and flex 3.5. Is there any way to change the font color of a part of text in TextArea control without using "htmlText" property?

For example I have a string "dog, cat, fish". I want to change the color of "cat" word to red. Is it possible to do?

Answer 1

If you already have a way to locate the characters then all you need are the TextFormat and TextField classes to achieve this. The TextFormat class allows you to define a style for the field...

var format:TextFormat = new TextFormat();
format.font = "Helvectica";
format.size = 14;
format.color = 0xFFCC00;
format.leading = 2;

Then you can set that formatting on a subset of text in a TextField using...

var field:TextField = new TextField();
field.text = "fish cat dog rat"
field.setTextFormat( format, 6, 12 ) 

... where 6 is the index at which to begin formatting and 12 is the index to end it.

If you don't have a way to determine the start and end points of the formatting I'd suggest looking into using regular expressions.

Answer 2

It's probably best to extend TextArea and do what you want on the protected textField property within the subclass.

But there are a few steps you can take to get the textField from a TextArea. here's some code you'll need:

import mx.core.IUITextField;
import mx.core.mx_internal;

use namespace mx_internal;

var tf:IUITextField = textArea.getTextField();

The mx_internal is necessary to access getTextField() and you have to use IUITextField as flex wraps flash.text.TextField. It has the same interface and more so you can apply the example in Jeremy's answer.