Find the word the mouse is over for Text component (Flex/Actionscript)

Question

Is it possible (if so how) to find out what word the cursor/mouse is over when it is moving over a < mx:Text > component? So for example as the user moves the mouse along a sentence (inside text component), each word will highlight as they go (I know you can highlight while pressing the mouse button down - but that not how I wish to do it).

Thanks for any info.

Answer 1

Here's one way to do it: you need to create your own component that extends the mx:Text component. I used MyText in this example. Here's the full code for MyText:

<?xml version="1.0" encoding="utf-8"?>
<mx:Text xmlns:mx="http://www.adobe.com/2006/mxml" mouseMove="onMouseMove(event)" initialize="init()">
    <mx:Script>
        <![CDATA[

            // Text formats
            private var normalTextFormat:TextFormat;
            private var highlightTextFormat:TextFormat;

            // Saved word start and end indexes
            private var wordStartIndex:int = -1;
            private var wordEndIndex:int = -1;

            private function init():void
            {
                normalTextFormat = textField.getTextFormat();
                normalTextFormat.color = 0;
                highlightTextFormat = textField.getTextFormat();
                highlightTextFormat.color = 0xFF0000;
            }

            private function onMouseMove(event:MouseEvent):void
            {
                // Clear previous word highlight
                textField.setTextFormat(normalTextFormat, wordStartIndex, wordEndIndex);

                var charIndexUnderMouse:int = textField.getCharIndexAtPoint(event.localX, event.localY);
                wordStartIndex = charIndexUnderMouse;
                wordEndIndex = charIndexUnderMouse;

                // Find start of word
                while (text.charAt(wordStartIndex) != " " && wordStartIndex > 0)
                {
                    wordStartIndex--;
                }

                // Find end of word
                while (text.charAt(wordEndIndex) != " " && wordEndIndex < text.length)
                {
                    wordEndIndex++;
                }

                // Highlight character
                textField.setTextFormat(highlightTextFormat, wordStartIndex, wordEndIndex);
            }
        ]]>
    </mx:Script>

</mx:Text>

It works by accessing methods of the TextField object inside the Text component, finding the character index under the mouse coordinates and then finding the word the character belongs to. This is a quick example, you probably need to make it more elaborate for real world use.

Answer 2

You need to use the TextSnapshot class. You can grab it from your text control from the textSnapshot property. TextSnapshot has a hitTestTextNearPos() function that you can use to determine which character the user's mouse is near.

...
var startIndex:Number;
...

private function textMouseMoveHandler(event:MouseEvent):void
{
    var snapshot:TextSnapshot = text.textSnapshot;
    var index = snapshot.hitTestTextNearPos(event.x, event.y);

    snapshot.setSelected(startIndex, index, true);
}

// I do not know how you want to begin the selection, so I put it here in the MouseEnter event.
private function textMouseEnterHandler(event:MouseEvent):void
{

    var snapshot:TextSnapshot = text.textSnapshot;
    startIndex = snapshot.hitTestTextNearPos(event.x, event.y);
}

Not sure how you want to handle starting the selection, but something like that should work.