As part of an AIR project that I have been working on with my good friend Rob, we came across the need to parse a number of URLs within the text of a Twitter post. This may not sound too easy at first, but thanks to the prototype property available on JavaScript objects, our task was a relatively simple one.
The prototype object of JavaScript is a prebuilt object that simplifies the process of adding custom properties or methods to all instances of an object. For example, there is not a trim() method available on the String class, therefore, through the wizardry of regular expressions and the prototype property, I can add one.
You simply need to specify String.prototype before your method definition. e.g.:
String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g,""); }
With this in mind, we can add methods to our String class, at runtime, that will allow us to manipulate the text string that is passed back in a Twitter JSON packet.
The Goal
To auto-magically parse different types of links within a text string. We will look at standard URL links, links applied to Twitter usernames and those applied to Hashtags.
Demo
The demonstration simply takes a test string and outputs it to the screen using JavaScript.
Parsing URLs as Links to the resource
First we create a custom method of the String.prototype property called parseURL. When invoked on a string, the regular expression finds any instance of a URL and will wrap the URL with an HTML anchor, with the correct href attribute and value applied.
String.prototype.parseURL = function() { return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(url) { return url.link(url); }); };
Demo 1.
We can simply demonstrate the parsing of the link with the following code in the body of the page:
<script type="text/javascript"> var test = "Simon Whatley's online musings can be found at: http://www.simonwhatley.co.uk"; document.write(test.parseURL()); </script>
In the above example, a simple string variable is created called test, which contains a URL. The text does not contain any HTML at this stage. We then write out the test variable applying the parseURL() method to it.
The resultant HTML generated is the following:
Simon Whatley's online musings can be found at: <a href="http://www.simonwhatley.co.uk">http://www.simonwhatley.co.uk</a>
When rendered in a browser, the code becomes a hyper-link.
Parsing Usernames as Links to Twitter
Following on from the URL example above, we can apply a similar methodology to Twitter usernames since they can also be URLs to their associated Twitter page.
Again we create a custom method of the String.prototype property, this time we’ll called it parseUser. The regular expression in this case finds all instances of @username. We then simply replace the @ as this is not part of the actual username. The Twitter URL is then applied to the username.
String.prototype.parseUsername = function() { return this.replace(/[@]+[A-Za-z0-9-_]+/, function(u) { var username = u.replace("@","") return u.link("http://twitter.com/"+username); }); };
Demo 2.
We can simply demonstrate this with the following code:
<script type="text/javascript"> var test = "@whatterz is writing a post about JavaScript."; document.writeln(test.parseUsername()); </script>
The resultant HTML generated is the following:
<a href="http://twitter.com/whatterz">@whatterz</a> is writing a post about JavaScript
Parsing Hashtags as Links to Twitter’s Search
Finally, Twitter also allows user’s to create Hastags within their posts. Hashtags are a community-driven convention for adding additional context and metadata to your tweets. Like regular URLs and usernames, Hastags can been parsed as a URL to an online resource, in this case, Twitter’s search.
Again we create a custom method of the String.prototype property, this time we’ll called it parseHashtag. The regular expression in this case finds all instances of #hashtag. The Twitter Search URL is then applied to the hashtag.
String.prototype.parseHashtag = function() { return this.replace(/[#]+[A-Za-z0-9-_]+/, function(t) { var tag = t.replace("#","%23") return t.link("http://search.twitter.com/search?q="+tag); }); };
Demo 3.
We can simply demonstrate this with the following code:
<script type="text/javascript"> var test = "Simon is writing a post about #twitter and parsing hashtags as URLs"; document.writeln(test.parseHashtag()); </script>
The resultant HTML generated is the following:
<code> Simon is writing a post about <a href="http://search.twitter.com/search?q=%23twitter">#twitter</a> and parsing hashtags as URLs </code>
NB. Twitter’s search was originally provided by Summize. However, as of July 2008, they have been bought by Twitter and the search can be found at http://search.twitter.com.
Where to take it next
Using the above code, we can now create a simple Twitter feed reader. Using, for example jQuery, to get and parse the Twitter JSON packet we can then apply the prototype methods to the text entries.
It is also worth noting that it is possible to cascade the methods, so we can do the following:
<script type="text/javascript"> var test = "@whatterz is writing a blog post about #twitter, which can be found at http://www.simonwhatley.co.uk"; document.writeln(test.parseURL().parseUsername().parseHashtag()); </script>
Download the code
The example code can be downloaded from the demo page.
The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML, and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a 
Mike Chambers announced at the 
Recent Comments