AS3 TextHighlighter

Because of the lack of text highlighting capabilities for Flash TextFields I coded a small class with a simple API to highlight text with your custom style. For your own styles you just have to implement an interface. The highlight method takes either a String or Regular Expression as argument.

The class doesn’t work for scrolling text at the moment, but feel free to extend the class.

example:



code:

// highlight container
var highlight : Sprite = new Sprite();
addChild(highlight);
 
// create textfield
var textField : TextField = new TextField();
addChild(textField);
 
// apply text style and add text
...
 
// highlight style
var style : IHighlightStyle = new SimpleHighlightStyle(0x00ff00, 0.5);
 
// highlighter
var textHighlighter : TextHighlighter = new TextHighlighter(textField, highlight, style);
textHighlighter.highlight(/far/gi);
textHighlighter.highlight("Duden", false);

files:

version 0.1
TextHighlighter_01.zip



13 Responses (Add Your Comment)

  1. Nice. Thanks for sharing this :)

  2. This is great. Thank you for writing this class.

    I am running into problems however with special html characters. Is there a way to highlight special characters such ampersands or dollar signs?

  3. ahh thanks for the hint Mark. The class always uses regular expressions internally, so chars like ^ $ \ . * + ? ( ) [ ] { } |, so called metacharacters won’t work in the String notation of the highlight method, I didn’t think about that. But you can always use a RegExp with the escape char \ for highlighting special chars. In case of the dollar sign it would be

    textHighlighter.highlight(/\$/gi);

  4. btw. ampersands should work fine with the string notation

  5. is there a way to highlight dynamically? It’s like when you highlight a text for copy pasting…can be any words from the text. So the textHighlighter.highlight(…); would receive the text from mouse coordonates.

  6. hey ariisom,
    I guess you could use the TextHighlighter for your problem, but I wouldn’t do it, you can use the built in methods as well. In either way you have to determine the word you are hovering. Having the word or the positions of the word the highlighting is very easy.

  7. Hi,
    It’s great and all but can I highlight so that lets say after the word “layer” is highlighted and before the word “layer1″ is highlighted?

  8. as it is based on Regular Expression you could almost do everything you like.

    You can use Grants RegExp Tool to test the regular expressions on your text http://gskinner.com/RegExr/

  9. Thx that helps a lot! :D
    next question: how can I create a multi line highlight so how can I highlight something like:

    hello bla bla bla
    lol XD
    hehe no das verstehe ich nicht

    ?

  10. that depends on your RegExp … you have to use the multiline option e.g. “/far/gm”

  11. THX :D

Trackbacks:

Leave a Reply

Formatting: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Other Entries

About

Martin Rädlinger is an Interactive Developer & Designer. He specializes in interactive coding predominantly with ActionScript, but every new challenge is welcome. If you like his work feel free to get in touch with him. At the moment he's available for freelance work.

Contact

Martin Rädlinger
mail: mr [at] formatlos.de
web: www.formatlos.de
xing: Martin Rädlinger
linkedin: Martin Rädlinger
skype: martinraedlinger