Maybe you have read RegExr: Online Regular Expression sample(www.regexr.com) , the high-light effect of matched characters is perfect and with the mouse moving will show the detail information of the alphabetic string as the following image show. 

Because it adds a DisplayObject into the matched alphabetic string.

Then let’s try to do this effect.  

Demo | Download Full Project

How to locate postion of the high-light and height and width is the important point. We could get the relative data by the  TextField.

1.getLineIndexOfChar(charIndex:int):int
Returns the zero-based index value of the line containing the character specified by the charIndex parameter.

2.getLineOffset(lineIndex:int):int
Returns the character index of the first character in the line that the lineIndex parameter specifies.

3.getLineLength(lineIndex:int):int
Returns the number of characters in a specific text line.

4.getLineIndexOfChar(charIndex:int):int
Returns the zero-based index value of the line containing the character specified by the charIndex parameter.

5.getCharBoundaries(charIndex:int):Rectangle
Returns a rectangle that is the bounding box of the character.

Let’s see another image to understand the structure of flash text.

Pay more attention of the “2-pixel gutter”. If forget adding it to the postion formula, the high light area will be offset by 2 pixels.

Now let’s first consider the position of the high-light area ( the text arranged in this article are limited from left to right ) 

1. The case which selected text block out of the TextField displaying area could be ignored.

2. Selected text block in the TextField displaying area. Devide the selected text block into “single line”. The first line high-light area is from beginIndex to end characters of the first line. The middle lines high-light area is from the line begin to line end. The last line high-light area is from the line begin to endIndex. 

3. Part of the selected text block in the displaying area and part out of the displaying area. Then there are two situation:

1) If the start index value less than the first character of the displaying area then just need to high-light the beginIndex to endIndex as following image.

2) If the end index value bigger than the end character of the displaying area then just need to high-light the beginIndex to endIndex as following image.

Summarized as follows:
1. Get the effective biginIndex and endIndex.

2. The single line do the single line high-light.

3. The multi-line do the high-light according the first line, middle line and last line.

When we have known the basic method, built the the new project “HighlightText”

New built the folder com->kingnare->regex

New built class HighlightBlock under regex folder and superclass choose UIMovieClip.

According the previous idea, we wrote the class Highlight Block:

HighlightBlock.as

Then let’s simply explain the process of the HighlightBlock:

Get the begin and end index of the high-light block in displaying area by the way of getValidBeginCharIndex and getValidEndCharIndex. Then high light the block by normalDraw.

In normalDraw method, get the distance which the imported index value located line relative to the text registration point by getDisLineHeightByLine. It will be convenient to calculate the y coordinate of high-light block.

Then how to use the class?

The access parameter type is IUITextField, but the other internal components like TextArea is protected then need to visit by succession. New built file com->components, new built class BlockTextArea and superclass choose TextArea:

The code as below:

Switch to the HighlightTest.mxml, set the height and width of the main program is 160×420 and new add a component BlockTextArea. Then add other components.

Switch to the Design panel:

Next add ActionScript code for the main program.

First is the event applicationComplete of Application. 

Next write the initApp in ActionScript:

In this way we initialize the lightText, beginIndexInput, endIndexInput and add the ScrollEvent’s Listener of lightText.

Complete the click way of “show highlight” button as the way of high-light displaying. 

In order to update the high-light block immediately, we need to add a timer. When the text changed, call the showBlock to redraw the high-light block. The final code as below. 

Then we start to test. Click the button “Debug”:

Click the button “Show Highlight”, you will find the blue high-light area:

When the rolling bar roll, it will call the way updateBlock. Redraw the high-light block by calling showBlock after 5ms.

( If beginIndex less than 0 or endInder bigger or equal to the text length. or endIndex less than beginIndex, it will not show the high-light block.)

If you feel the display method is too rigid, you could change the drawBlock in HighlightBlock or rewrite the drawBlock to create the effect such as wave line, underscores and etc.

If change the type of _textField from IUITextField to TextField and do relative change, the class HighlightBlock also could be applicated in ActionScript Project.

OK, now we have finished introducing the how to write and the use of method of HighlightBlock.

Cheers.