Flex中利用TextRange类高亮(hightlight)显示文本内容的例子

在显示搜索结果，标记重点文本内容等很多时候都需要用到文本高亮显示，接下来的例子演示了Flex中如何利用TextRange类，高亮(hightlight)显示文本内容。下面的Demo中用了两个Slider，拖动来选择高亮文本范围。

让我们先来看一下Demo（

可以右键View Source或点击这里察看源代码

）：

下面是完整代码(或点击这里察看)：
Download: main.mxml

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

<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.getItemAt(0)}, {slider.values.getItemAt(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>