How to parse URLs, hash tags, and more from a tweet
Two ways to make your tweet text interactive
Tweets come with all kinds of actionable elements inside them these days. Shortened URLs, #hashtags, @replies, and the actual message body. When you’re consuming a list of tweets, it’s important to be able to parse out these elements from the plain text so that they can be made into hyperlinks and directed at the proper location.
Take two common examples where this technique comes in handy: I) Displaying a tweet on a webpage. II) Displaying a tweet on an iOS application. In both cases you want the user to interact with the tweet if actions are available. With iOS this usually involves loading the tweet into a UIWebView so that you can work with multiple links within a single tweet. As is generally the case, there is more than one way to skin this cat.
Option 1: Parse the message body using Regular Expressions
While this may not be the most bullet proof method, it’s one I’ve employed successfully many times when a quick solution is required. A nice bonus to this method is that since the RegEx replacements are easily written using JavaScript, the logic can be directly reused on the web, iOS, Android, and anything else with a web based control.
Once you’ve retrieved the tweet message text, you can parse the action elements using the following functions:
Let’s say you’ve got the tweet text in a variable:
var tweetText;
You can convert the plain text into hyperlinked action items by doing the following:
tweetText = tweetText.parseURL().parseUsername().parseHashtag();
Now where there was once plain text in var tweet, you have HTML with the appropriate <a> tags and href attributes. You can use the same method on iOS by loading the tweet into a UIWebView with HTML. In the body tags onLoad method, call your JavaScript function to do the parsing and voila!
Option 2: Reconstruct the message body using the entity array
The second option uses a separate array of elements returned by the Twitter API in conjunction with the message text to give you the actionable items (links, hashtags, mentions, media) and the insertion points within the text body.
The implementation of this solution depends on your application and programming language, but sticking with the JavaScript example, one possible solution from GitHub Gist is:
For a more robust library, check out the twitter-text-js project on GitHub which also supports international character sets and handles a wide variety of common Twitter text processing tasks.
