Utilizing Regular Expressions in AS3
Regular Expressions are a powerful tool that you can utilize in many different programming languages. After throwing together the little twitter widget at the top of this page - I was informed by Brian Shaler of a major bug that causing it to crash. So while reworking the code to fix it I figured I'd add some much needed functionality as well. You see, just grabbing the feed from twitter does not generate html links for you. You have to parse your feed and wrap any '@username' responses, or 'http://addresses' into actual hyperlinks yourself. Here's how I did it.
Finding the @usernames and HTTP Addresses
So this is where we actually utilize RegExp. In Flash RegEx works very similar to other programming languages. You simply define a new variable as a with :RegExp class and then assign it a pattern. I used two separate patterns, one matches users, the other matches the http addresses. I won't go into detail on explaining the RegEx patterns itself here as that is an entirely different topic. What I'm focusing on here is how to implement them in flash. But just for the heck of it, incase you want to take tese and make them better here are the two regular expression patterns I wrote:
- '@usernames':
/(\s@+\w*(\s|,|!|\.|\n))/ - 'http://...':
/[^"|^>](http:\/\/+[\S]*)/
So here is the actual code I use in the widget above. The only difference is the 'cur' variable on the first line passes the current title from the twitter RSS feed instead of the dummy string I've hardcoded:
private function dropRSS():void {
var cur:String = "Hey @sunnythaper, @shalerjump, @jamesarcher! Check this out: http://tinyurl.com/377owu"
if (cur.substr(0,1) == "@") { // Skip response messages as they do not always provide enough context to be stand alone statements.
_current++;
dropRSS();
} else {
cur = cur+" "; // Append a space at the end so RegEx catches trailing expressions
var twitterUser:RegExp = /(\s@+\w*(\s|,|!|\.|\n))/; // "
var url:RegExp = /[^"|^>](http:\/\/+[\S]*)/;
while(twitterUser.exec (cur) != null) {
cur = cur.replace(twitterUser, pointToUser);
}
while(url.exec (cur) != null) {
cur = cur.replace(url, setUrl);
}
twit.htmlText = cur;
TweenLite.from(twit, 2, {ease:Elastic.easeOut, y:"-10", alpha: 0});
_current++;
}
}
What's important to take note of is two things: 1) I need to loop and execute the pattern onto the string until it no longer finds any matches 2) I'm passing a function as the second parameter in the replace method as opposed to an alternate string.
- This has worked great but fundamentally I think there is a more efficient way of doing this without looping and executing the RegEx so many times.
- If you know a better way let me know and I'll update this post.
Implementing Changed on Your Matches
As I said, I'm passing a function to actual handle the replacement as opposed to just passing a replacement string. This is because I need to run some processes on the matches to build urls based off of them. Flash lets you reference the matches in the functions as arguments. Here is the code.
private function pointToUser():String {
return " <a href=\"http://twitter.com/"+arguments[1].substr(2,arguments[1].length-3)+"\">"+arguments[1].substr(1,arguments[1].length-2)+"</a>"+arguments[1].substr(arguments[1].length-1,1);
}
private function setUrl():String {
return " <a href=\""+arguments[1]+"\">"+arguments[1]+"</a>";
}
Of course, if the RegEx pattern generated two or three differently matched terms you could reference them as well via arguments[2], arguments[3] etc.. Here you can do whatever you want. I chose to disect the one argument I was working with through a series of substring routines to trim out unwanted characters in certain parts and then re-insert them outside of the html.