Getting started with Regular Expressions

Today I took my first step into the world of regular expressions. This cryptic, but fascinating, system provides fast text searching and validation, and it’s a new native feature of Actionscript 3. To aid myself in the learning process, I put together a simple little application to provide instant visual feedback on the results of regular expression matching with some input text. If no results are found, the input box turns red, otherwise it appears green. Multiple strings will appear in the results box when the expression returns more than one match.

Screenshot of the regular expressions explorer

An email validation expression is the default input. If you use this code in another project, you can initialize the RegExForm component to start out with blank input if you wish. In the demo, additional forms may be added dynamically. I find it useful to see and compare different variations of an expression simultaneously.

The source code is available for download. It is released under the MIT license. You may also view the demo. Flash Player 9 Beta 3 is required.

About Josh Tynjala

Josh Tynjala is a frontend developer, open source contributor, bowler hat enthusiast, and karaoke addict. You might be familiar with his project, Feathers UI, an open source user interface library for Starling Framework that is included in the Adobe Gaming SDK.

Discussion

  1. Josh Tynjala

    Thanks for adding the link to the Flex 2 regex guidelines, Rostislav. I agree that the input field should be longer for long regexes. Perhaps I will update the component to include resizing.

  2. Pingback: Add FlexComponents to your mailing lists! » Zeus Labs » Flash and Actionscript Insights from a San Diego Developer and Designer

  3. Pingback: Projects updated for Flex 2! » Zeus Labs

  4. worked

    What would the regexp look like if one required at least one number and one special character with a range from 6-12 characters? i.e., for a password input field. Thanks!

  5. worked

    …and I appreciate the app, I’ll be using it as I too learn more about regexp. Also, I found this snippet and it requires 6-12 characters, one uppercase, one lowercase and one number: ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{5,13}$ Now to find a way to require one special character and I’m all set. 😉

  6. worked

    ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[&\-#!%]).{5,13}$ Working! Thanks again for the app!

  7. Ryan Swanson

    Hey Josh,

    I’ve followed your work for some time and enjoyed your presentation on creating your TreeMap component at FlexManiacs in D.C. You do some great work.

    I just stumbled on this post about creating a regular expression tool and wanted to let you know about a similar application I’ve recently created that takes the idea a bit further.

    It’s called the Flex 3 Regular Expression Explorer (similar in many ways to the Component and Styles Explorers) and includes not only the ability to work with regular expressions in a live-updating tool and an example library of common expressions, but also the ability to share your own examples with the community and an integrated help/reference panel.

    http://blog.ryanswanson.com/2008/10/introducing-flex-3-regular-expression.html

    I hope you’ll check it out and would certainly love some feedback.

    Thanks,
    Ryan

  8. Josh Tynjala

    Ryan, I spotted your RegExp Explorer a few days ago. It’s very cool. I don’t work with regular expressions often, but I’ll definitely look to play around with your explorer in the future.