Using the TextRange class to hightlight text

I was working on a mini-app the other night, and was trying to figure out how to color only certain words in a text-based control. After a bit of poking around, I discovered that the TextRange class seems to be the right tool for the job.

Full code after the jump.

The following example uses a two-thumb Slider control to let you select a range of text to apply some formatting to. The text color can be controlled using the handy ColorPicker control, and feel free to erase my filler text and try something else. As the text in the TextArea changes, the TextRange and slider gets recalcuated.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle" backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;
            import mx.controls.textClasses.TextRange;

            private var tr:TextRange;

            private function slider_change(evt:SliderEvent):void {
                updateTextRange();
            }

            private function textArea_change(evt:Event):void {
                // Recalculate length.
                slider.maximum = textArea.length;

                updateTextRange();
            }

            private function updateTextRange():void {
                try {
                    /* Default the TextArea control's text color back to black. */
                    tr = new TextRange(textArea);
                    tr.color = "black";
                    tr.textDecoration = "normal";

                    /* Set the text color to red for the values in the Slider. */
                    tr = new TextRange(textArea, false, slider.values[0], slider.values[1]);
                    tr.color = colorPicker.selectedColor;
                    tr.textDecoration = "underline";
                } catch (err:RangeError) {
                    /* Somethin' ain't right! I dare say you have no text, son! */
                }
            }
        ]]>
    </mx:Script>

    <mx:VBox width="380">
        <mx:HBox>
            <mx:Label text="Text selection color:" />
            <mx:ColorPicker id="colorPicker" selectedColor="red" />
        </mx:HBox>

        <mx:HBox>
            <mx:Label text="Text selection range:" />
            <mx:HSlider id="slider" thumbCount="2" liveDragging="true" snapInterval="1" dataTipPrecision="0" minimum="0" maximum="{textArea.length}" change="slider_change(event)" />
            <mx:Label text="({slider.values[0]}, {slider.values[1]})" />
        </mx:HBox>

        <mx:TextArea id="textArea" width="100%" height="120" change="textArea_change(event)">
            <mx:text><![CDATA[The quick brown fox jumped over the lazy dog.]]></mx:text>
        </mx:TextArea>
    </mx:VBox>

</mx:Application>

View source enabled in the following example

4 thoughts on “Using the TextRange class to hightlight text

  1. I’m using a text range to insert text into a text area.
    In the following example try inserting text using the ‘insertText’ button
    Then try the ‘getText’ button. I’m getting the text as unmodified (inserted text doesn’t appear) in Alert box .
    Next try editing the text area manually (add a space at the end) then trying the getText button again. The inserted text now appears in the Alert box.

    Am I missing something?

    This is a multiline, editable TextArea control. If you need
    a non-editable multiline control, use the Text control.

  2. Hi
    Iam using textRange to highlight the selected text in the textArea. i can chenge the color,bold,italic but i cant able to change the text background color..please help me out from this… i need to add the yellow background color to highlight the selected text.

  3. I like your catch block :) Love the example too! Was thinking of using the FlexLib component, but TextRange will suffice for now. Thanks for the millionth time, Peter!

Comments are closed.