Getting started with Regular Expressions

by Josh Tynjala

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 the Author

Josh Tynjala is an indie game developer, entrepreneur, Flash and Flex mercenary, and bowler hat enthusiast.

Discussion
  1. Kewl bro. Its crazy gibberish but aparently very powerful. will have a look. :o )

    posted by Campbell on 05.22.2006
  2. Very good tool. By the way, it will be handy to see some Flex 2 regex guidelines while playing with it. Also, I think stretched input field would be more useful to fit long RegExes, isn’t it?

    posted by Rostislav Siryk on 05.23.2006
  3. 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.

    posted by Josh Tynjala on 05.23.2006
  4. [...] I recently posted a very simple component there. It’s a specialized TextInput box that will grow or shrink to fit its text. This component is beyond simple to implement, but it worked well in my Regular Expression explorer and I’m sure that others can find uses for it too. [...]

    posted by Add FlexComponents to your mailing lists! » Zeus Labs » Flash and Actionscript Insights from a San Diego Developer and Designer on 07.12.2006
  5. [...] I enhanced my Regular Expressions Explorer. Type in a regular expression, and some text to validate or search on, and it will show a list of [...]

    posted by Projects updated for Flex 2! » Zeus Labs on 02.06.2007
  6. 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!

    posted by worked on 06.23.2008
  7. Sorry worked, I’m no regex expert. That’s why I made this app, so it would be easy to play around with regex until I figured it out.

    posted by Josh Tynjala on 06.23.2008
  8. …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. ;)

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

    posted by worked on 06.23.2008
  10. 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

    posted by Ryan Swanson on 10.22.2008
  11. 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.

    posted by Josh Tynjala on 10.22.2008
Share Your Thoughts

To display code in comments: <pre>Code here. May be multiline. Format XML with &gt; and &lt; entities.</pre>

Some HTML allowed in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>