Text find and Highlight

Report · Mar 08, 2013

I have a textbox that I am loading text from instructionsArray that gets data from a XML file. I want to search that textbox for a word that might be in the dictionaryArray that gets data from and XML file. Then I want the word if its there to be higlighted in red and be able to rollover or click the word to get a popup that shows the words definition that is also in the dictionaryArray. SO the code for all of this as I have it so far builds a rectangle backgournd and addes the textbox to it. The MA is a variable that tells what set of instuctions it is on (1, 2, etc). Everything works except the search and highlight. Is this better?

XML FILE

CODE for XML Dictionary

<?xml version="1.0" encoding="utf-8"?>

<word>Enzymes</word>

<definition>Natural chemical substances found in all plant and animal tissue. In growing plants, they aid in all growth processes including maturation and ripening. After maturity, continued activity of enzymes can cause undesirable changes in color, ﬂavor and texture. Enzymes that cause these undesirable changes are destroyed during heat processing of foods.</definition>

</visualAids>

</allWords>

<word>Oxidation</word>

<definition>Gain in oxygen or loss of electrons. Acid Foods: Foods containing natural acids, those that had vinegar added to them or those produced by controlled microbial fermentation are classiﬁed as acid foods. This food group includes fruits, tomatoes, pickles, sauerkraut and relishes. Because microorganisms do not thrive in acid, these foods can be safely processed in a water bath canner at 212 F (100 C) </definition>

</visualAids>

</allWords>

</dictionary>

CODE FOR XML INSTRUCTIONS

<?xml version="1.0" encoding="utf-8"?>

<name>

act1

</name>

Before tomatoes enter the plant, they must be graded for quality. The quality of the tomatoes on a truckload determines how much the producer gets paid. Only grade A/B tomatoes will be used in canning. Grade C tomatoes may be used for other types of tomato food products such as juice or salsa.

</boxtext>

<![CDATA[ Tomato Grading

Enzymes The quality grade of a tomato is based on 3 things: size, ripeness and defects. This step is only an average of the quality for the whole truck so the producer can be fairly paid. Later, every tomato will be graded both by machine and by hand before being processed.

Minimum quality requirements must be met to continue processing or you risk the final canned product getting recalled by the USDA. The estimated Grade quality for the truck is not sufficient enough. Each tomato is graded for redness by a machine where tomatoes that are too green are siphoned off for juice production. Tomatoes are also evaluated by hand so that any broken fruit can be discarded. Broken fruit will jam up the machinery and not peel properly.

Now it is your turn to practice grading tomatoes in order to determine how much to pay the producer!

1. Take a sample of tomatoes from 3 different spots in the truckload. 2. Give each separate sample a grade of A/B, or C. 3. Then average the 3 samples together to determine how much to pay you producer and decide what finished product to use the tomatoes for.

]]>

</instructions>

<![CDATA[ How would you grade this truck?]]>

</question>

<a>Grade A</a>

Grade B

<c>Grade C</c>

</options>

<video>

Arrival

</video>

</actInstructions>

</allInsturctions>

//LOAD EXTERNAL XML FILES

function loadXML():void

{

XMLLoader.addEventListener(Event.COMPLETE, xmlLoadComplete);

XMLDataRequest = new URLRequest(XMLFiles[XMLFilesPointer]);

XMLLoader.load(XMLDataRequest);

trace(XMLFiles[XMLFilesPointer]);

}

function xmlLoadComplete(e:Event):void

{

XMLLoader.removeEventListener(Event.COMPLETE, xmlLoadComplete);

var xmlData = XML(e.target.data);

//distinguish between both xml types

xmlData.ignoreWhitespace = true;

if (xmlData.actInstructions != undefined)

{//if instructions node exists, then it is instructions xml

trace('instructions xml file');

for (var b = 0; b < xmlData.actInstructions.length(); b++)

{

instructionsArray.push({name:xmlData.actInstructions.name.text(), boxtext:xmlData.actInstructions.boxtext.text(), instructions: xmlData.actInstructions.instructions.text(), question: xmlData.actInstructions.question.text(), image: xmlData.actInstructions.visualAids.text(), video: xmlData.actInstructions.video.text() });

}

if (xmlData.allWords != undefined)

{//if movie node exists, then it is dictionary xml

trace('dictionary xml file');

trace(xmlData.allWords.length());

for (var n = 0; n < xmlData.allWords.length(); n++)

{

dictionaryArray.push({word: xmlData.allWords.word.text(), definition: xmlData.allWords.definition.text(), image: xmlData.allWords.visualAids.text() });

}

XMLFilesPointer++;

if (XMLFilesPointer < XMLFiles.length)

{

loadXML();

}

//build display and add text

var words:Array = instructionsArray[MA].instructions.split(/\s+/);

var highlight:TextFormat = new TextFormat("Arial",14,0xff0000,null,true);

var dictionaryTimer:Timer = new Timer(100,dictionaryArray.length-1);

dictionaryTimer.addEventListener(TimerEvent.TIMER, onTimer);

dictionaryTimer.start();

function onTimer(e:TimerEvent):void

{

textbox.setTextFormat(textbox.defaultTextFormat);

var re:RegExp = new RegExp("\\b"+words[dictionaryTimer.currentCount]+"\\b", "gi");

var result:Object = re.exec(instructionsArray[MA].instructions);

while (result)

{

textbox.setTextFormat(highlight, result.index, result.index+words[dictionaryTimer.currentCount].length);

result = re.exec(instructionsArray[MA].instructions);

}

instructionsFormat.font = tomatoBasefont.fontName;

instructionsFormat.size = 14;

textbox.defaultTextFormat = instructionsFormat;

textbox.multiline = true;

textbox.htmlText = instructionsArray[MA].instructions;

textbox.width = 778;

textbox.height = 340;

//Testing Dictionary Search START

//Search instructions for words in dictionaryArray

dictionaryTimer.addEventListener(TimerEvent.TIMER, onTimer);

dictionaryTimer.start();

//Testing Dictionary Search END

i_MC.x = 180;

i_MC.y = 160;

i_MC.name = "instructionBox";

// Shadow Gray color;

qbkg_shadow.graphics.beginFill(shadowColor);

// x, y, width, height, ellipseW, ellipseH;

qbkg_shadow.graphics.drawRoundRect(10, 10, 788, 351, 20, 20);

qbkg_shadow.graphics.endFill();

// Purple Box color;

qbkg.graphics.beginFill(boxColor);

// x, y, width, height, ellipseW, ellipseH;

qbkg.graphics.drawRoundRect(0, 0, 788, 351, 20, 20);

qbkg.graphics.endFill();

xClose.addEventListener(MouseEvent.MOUSE_DOWN, mouseClickHandler);

xClose.x = 750;

xClose.y = 2;

i_MC.addChild(qbkg_shadow);

i_MC.addChild(qbkg);

i_MC.addChild(textbox);

i_MC.addChild(xClose);

addChild(i_MC);

Report · Mar 08, 2013

Show an example how it works at the moment, and how you intend it to work (make a mockup or sth.)

Also:

What is the specific reason why you duplicate this LOC?

dictionaryTimer.addEventListener(TimerEvent.TIMER, onTimer);

dictionaryTimer.start();

Report · Mar 08, 2013

I apologize, the first one is not supposed to be there. Attached are your request. The first one is how it works now. The second one is how I want it to work with either a mouseOver or mouseClick. (useing the word Enzyme as the word from the dictionary)

Report · Mar 08, 2013

first problem I see is here:

var result:Object = re.exec(instructionsArray[MA].instructions);
          while (result)
          {
                    textbox.setTextFormat(highlight, result.index, result.index+words[dictionaryTimer.currentCount].length);
                    result = re.exec(instructionsArray[MA].instructions);
          }

when I test this:

var result:Object = new Object();

while(result){

}

trace("THE END");

The Code timesout because it never leaves the while-Loop.

I think you should use a for each-loop instead.

If it works for you (your code gets compiled) then I might be wrong, but then I don`t understand the purpose of the second line inside the loop, its at Best unnecessary, at worst it messes up your loop (because it resets the condition every time you enter the loop)

result = re.exec(instructionsArray[MA].instructions);

it would be useful to trace out the content of result inside the loop to see how often it executs and what are the results.

Generally speaking: What you are trying to achieve is not so trivial as it might seem at first sight. I use some Tooltip-classes in my projects but they all depend on the fact that the DisplayObject is discrete.

I found one thread where the subject was discussed, but no workable solution. The procedure would involve a workaround where you have to put a transparent MovieClip over the specific word, that would involve somehow extracting the stageX,stageY and height and width of your specific word, and if you resize your stage or scroll your textfield this would have to be updated properly. It sounds like alot of work, if you ask me.

If anyone has an idea how to tackle the whole concept of tooltips in a dynamic textfield with more "standardized" programming-weapons, shoot.

Report · Mar 08, 2013

"The Code timesout because it never leaves the while-Loop."

Of course it times out - there is no code in the loop body that stops it's execution.

Report · Mar 08, 2013

First, you shouldn't use timer in this case. In your previous thread I used timer for just highlighting different words.

In you case since only one word needs to be highlighted (unless I don't see something), you just need a function that will highlight a single word or all the instance of this word when you pass them once.

I gave an example in your previous thread how to use a single term without timer.

Here how this function can look like given TextField instance is tf:

function highlightWord(term:String):void
{
          var re:RegExp = new RegExp(term, "gi");
          var result:Object = re.exec(originalText);
          while (result)
          {
                    tf.setTextFormat(highlight, result.index, result.index + term.length);
                    result = re.exec(originalText);
          }
}

Report · Mar 08, 2013

As far as roll over dilemma goes, here is a food for thought.

TextField.getCharBoundaries() documentation suggests a very straightforward approach:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/TextField.html#getChar...()

1. Get word boundaries.

2. Collect boundaries into an array if you use multiple words or just a single boundary.

3. Draw hot spot (interactive sprite) over the boundaries.

4. Add mouse roll over event listener - and you are in business.

To get you started:

function highlightWord(term:String):void
{
          var re:RegExp = new RegExp(term, "gi");
          var result:Object = re.exec(originalText);
          var bounds:Rectangle;
          while (result)
          {
                    tf.setTextFormat(highlight, result.index, result.index + term.length);
                    /**
                     * grab word boundaries by
                     * 1. reading first char boundaries
                     * 2. uniting boundaries with the last char boundaries
                     */
                    bounds = tf.getCharBoundaries(result.index).union(tf.getCharBoundaries(result.index + term.length);
                    result = re.exec(originalText);
          }
}

Report · Mar 09, 2013

And here is a "workable solution" - an example of how to deal with it.

This class creates roll overs and tooltips for the search term.

A lot of this code is based on what we discussed before - nothing really new.

Just place this class in to FLA directory and make this class a Document Class in Flash IDE. I don't like Flash IDE and coding on the timeline - so it is up to you to translate it into timeline code. Some aspects are commented in the code.

package
{
          import flash.display.Sprite;
          import flash.events.MouseEvent;
          import flash.geom.Rectangle;
          import flash.text.TextField;
          import flash.text.TextFormat;
          public class TextRollOverExample extends Sprite
          {
                    private var highlight:TextFormat = new TextFormat("Arial", 14, 0xff0000, null, true, true);
                    private var originalText:String;
                    private var tf:TextField;
                    private var inputField:TextField;
                    private var termBoundaries:Vector.<Rectangle>;
                    private var _searchTerm:String;
                    private var tipText:TextField;
  
                    public function TextRollOverExample()
                    {
                              init();
                    }
  
                    private function init():void
                    {
                              originalText = "I have a textfield that I am reading the content in from a XML file.  Is there a way to search said textfield for a certain word from an Array?  For Ex.  if I have a paragraph of text in the textfield and I want to search the textfield for a word that is in an array like 'The' and underline every instance of the word can I do that?";
                              tf = new TextField();
                              tf.defaultTextFormat = new TextFormat("Arial", 12);
                              tf.multiline = tf.wordWrap = true;
                              tf.width = 300;
                              tf.autoSize = "left";
                              tf.text = originalText;
                              tf.x = tf.y = 50;
                              addChild(tf);
                              searchTerm = "textfield";
                    }
  
                    private function set searchTerm(term:String):void
                    {
                              _searchTerm = term;
                              tf.setTextFormat(tf.defaultTextFormat);
                              var re:RegExp = new RegExp(term, "gi");
                              var result:Object = re.exec(originalText);
                              termBoundaries = new Vector.<Rectangle>();
                              while (result)
                              {
                                        tf.setTextFormat(highlight, result.index, result.index + term.length);
                                        // get term boundaries and push them into collection of all related boundaries
                                        termBoundaries.push(tf.getCharBoundaries(result.index).union(tf.getCharBoundaries(result.index + term.length)));
                                        result = re.exec(originalText);
                              }
                              drawHotSpots();
                    }
  
                    private function drawHotSpots():void
                    {
                              // create hot spots for all
                              for each (var rect:Rectangle in termBoundaries)
                                        hotSpot = rect;
                    }
  
                    private function set hotSpot(rect:Rectangle):void
                    {
                              var s:Sprite = new Sprite();
                              s.buttonMode = s.useHandCursor = true;
                              s.addEventListener(MouseEvent.MOUSE_OVER, onHotSpotInteraction);
                              s.addEventListener(MouseEvent.MOUSE_OUT, onHotSpotInteraction);
                              s.graphics.beginFill(0xff0000, 0);
                              s.graphics.drawRect(0, 0, rect.width, rect.height);
                              addChild(s);
                              // position hotspot over corresponding word
                              s.x = tf.x + rect.x;
                              s.y = tf.y + rect.y;
                    }
  
                    private function onHotSpotInteraction(e:MouseEvent):void
                    {
                              switch (e.type)
                              {
                                        case MouseEvent.MOUSE_OVER: 
                                                  drawTooltip(_searchTerm, Sprite(e.currentTarget));
                                                  break;
  
                                        case MouseEvent.MOUSE_OUT: 
                                                  killToolTip();
                                                  break;
                              }
                    }
  
                    private function drawTooltip(term:String, target:Sprite):void
                    {
                              killToolTip();
                              tipText = new TextField();
                              tipText.defaultTextFormat = new TextFormat("Arial", 11, 0x008000);
                              tipText.width = 100;
                              tipText.border = true;
                              tipText.background = true;
                              tipText.borderColor = 0x808080;
                              tipText.autoSize = "left";
                              tipText.multiline = tipText.wordWrap = true;
                              tipText.text = "This thingy describes what " + term + " is.";
                              addChild(tipText);
                              tipText.x = target.x;
                              tipText.y = target.y + target.height + 2;
                    }
  
                    private function killToolTip():void
                    {
                              if (tipText)
                              {
                                        if (this.contains(tipText))
                                                  removeChild(tipText);
                                        tipText = null;
                              }
                    }
  
          }
}

Report · Mar 09, 2013

Impressive work!

Report · Mar 09, 2013

Also, because code formatter on the forum is totally screwed up make sure that all string are encased into quotes.

Here is another attempt to post with formatting.

package
{
          import flash.display.Sprite;
          import flash.events.MouseEvent;
          import flash.geom.Rectangle;
          import flash.text.TextField;
          import flash.text.TextFormat;
          public class TextRollOverExample extends Sprite
          {
                    private var highlight:TextFormat = new TextFormat("Arial", 14, 0xff0000, null, true, true);
                    private var originalText:String;
                    private var tf:TextField;
                    private var inputField:TextField;
                    private var termBoundaries:Vector.<Rectangle>;
                    private var _searchTerm:String;
                    private var tipText:TextField;
  
                    public function TextRollOverExample()
                    {
                              init();
                    }
  
                    private function init():void
                    {
                              originalText = "I have a textfield that I am reading the content in from a XML file.  Is there a way to search said textfield for a certain word from an Array?  For Ex.  if I have a paragraph of text in the textfield and I want to search the textfield for a word that is in an array like 'The' and underline every instance of the word can I do that?";
                              tf = new TextField();
                              tf.defaultTextFormat = new TextFormat("Arial", 12);
                              tf.multiline = tf.wordWrap = true;
                              tf.width = 300;
                              tf.autoSize = "left";
                              tf.text = originalText;
                              tf.x = tf.y = 50;
                              addChild(tf);
                              searchTerm = "textfield";
                    }
  
                    private function set searchTerm(term:String):void
                    {
                              _searchTerm = term;
                              tf.setTextFormat(tf.defaultTextFormat);
                              var re:RegExp = new RegExp(term, "gi");
                              var result:Object = re.exec(originalText);
                              termBoundaries = new Vector.<Rectangle>();
                              while (result)
                              {
                                        tf.setTextFormat(highlight, result.index, result.index + term.length);
                                        // get term boundaries and push them into collection of all related boundaries
                                        termBoundaries.push(tf.getCharBoundaries(result.index).union(tf.getCharBoundaries(result.index + term.length)));
                                        result = re.exec(originalText);
                              }
                              drawHotSpots();
                    }
  
                    private function drawHotSpots():void
                    {
                              // create hot spots for all
                              for each (var rect:Rectangle in termBoundaries) {
                                        hotSpot = rect;
                              }
                    }
  
                    private function set hotSpot(rect:Rectangle):void
                    {
                              var s:Sprite = new Sprite();
                              s.buttonMode = s.useHandCursor = true;
                              s.addEventListener(MouseEvent.MOUSE_OVER, onHotSpotInteraction);
                              s.addEventListener(MouseEvent.MOUSE_OUT, onHotSpotInteraction);
                              s.graphics.beginFill(0xff0000, 0);
                              s.graphics.drawRect(0, 0, rect.width, rect.height);
                              addChild(s);
                              // position hotspot over corresponding word
                              s.x = tf.x + rect.x;
                              s.y = tf.y + rect.y;
                    }
  
                    private function onHotSpotInteraction(e:MouseEvent):void
                    {
                              switch (e.type)
                              {
                                        case MouseEvent.MOUSE_OVER: 
                                                  drawTooltip(_searchTerm, Sprite(e.currentTarget));
                                                  break;
  
                                        case MouseEvent.MOUSE_OUT: 
                                                  killToolTip();
                                                  break;
                              }
                    }
  
                    private function drawTooltip(term:String, target:Sprite):void
                    {
                              killToolTip();
                              tipText = new TextField();
                              tipText.defaultTextFormat = new TextFormat("Arial", 11, 0x008000);
                              tipText.width = 100;
                              tipText.border = true;
                              tipText.background = true;
                              tipText.borderColor = 0x808080;
                              tipText.autoSize = "left";
                              tipText.multiline = tipText.wordWrap = true;
                              tipText.text = "This thingy describes what " + term + " is.";
                              addChild(tipText);
                              tipText.x = target.x;
                              tipText.y = target.y + target.height + 2;
                    }
  
                    private function killToolTip():void
                    {
                              if (tipText)
                              {
                                        if (this.contains(tipText)) {
                                                  removeChild(tipText);
                                        }
                                        tipText = null;
                              }
                    }
  
          }
}

Report · Mar 12, 2013

Andrei1 this is awesome. Does the text have to be a string or can it be htmlText? Can this be done with htmlText? can formatting be applied to the text block?

Report · Mar 12, 2013

Yes, it will work with html text as well but I wouldn't do that. TextFormat and htmlText are not really compatible. You will need to apply style sheet to the text. This may be more complex than dealing with TextFormat

I don't understand the question about block.

Report · Mar 12, 2013

You answered my question. So do I need to convert the XML data to string ? like tosString or toXMLString?

Report · Mar 12, 2013

Everything in XML is a string. XML is just a text.

Report · Mar 12, 2013

ok so I have some of it working. So this will work if the searchTerm is from an array from an XML file .... the call to the array would be dictionaryArray.word?

Report · Mar 13, 2013

I am having trouble getting this working by cycling through an array of dictinary words. Well it does it but doesnt highlight the word. If I do just one word it works great. So do you have to loop through the searchterms multiple times before reassembling it?

Report · Mar 14, 2013

I am not sure I understand what you are trying to do.

Report · Mar 14, 2013

Your code works great for one word. I have an array called dictionaryArray with mutiple words. I need to search the "originalText" for all the words that are in the dictionaryArray and do what your original code does.

Report · Mar 14, 2013

Look, it really helps to be clearer and more comprehensive about your use cases.

Do you want to highlight all the words in dictionaryArray simultaneously?

Report · Mar 14, 2013

Yes, with the tooltip.

Report · Mar 14, 2013

Use the function below - note its name is in plural - and pass your array into it:

private function set searchTerms(terms:Array):void
{
          tf.setTextFormat(tf.defaultTextFormat);
          var re:RegExp = new RegExp(terms.join("|"), "gi");
          trace(re);
          var result:Object = re.exec(originalText);
          termBoundaries = new Vector.<Rectangle>();
          while (result)
          {
                    tf.setTextFormat(highlight, result.index, result.index + result[0].length);
                    termBoundaries.push(tf.getCharBoundaries(result.index).union(tf.getCharBoundaries(result.index + result[0].length)));
                    result = re.exec(originalText);
          }
          drawHotSpots();
}

Report · Mar 15, 2013

Andrei1 I am including a sample of what I am doing so that you can see. This one sample works to a degree. I think this would be easier for you to see what I am trying to do. REMOVED (this link will not be active long) Thanks.

Text find and Highlight

Photos