Barcamp Brighton was a great event, attended by some of the web-gliterati: Jeremy Keith, Aral Balkan, Tantek Celik, Jerome Ribot and Mark Wudden to name but five I was lucky to converse with. That’s not to say the other attendees were any less significant. It was everyone who made the event great.

As you may have observed from the title of this post, I presented a talk, along with my good friend Rob Douglas, titled Talking QR.app.

The presentation can be viewed below, or via the SlideRocket website.

I have also bookmarked a number of QR-code links on Delicious.

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 pre-built 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.

See the demo in action.

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-_:%&~\?\/.=]+/g, 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-_]+/g, 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-_]+/g, 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:

Simon is writing a post about <a href="http://search.twitter.com/search?q=%23twitter">#twitter</a> and parsing hashtags as URLs

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 task I was trying to achieve was the installation of development versions of WordPress, Drupal, MediaWiki and Moodle, all of which would require a MySQL database. Trying to load the MySQL extension should have been a simple case of uncommenting the line in the php.ini and restarting the Apache service. With Vista, this was certainly not the case.

I set up a very simple page detailing the php configuration in an index.php file:

< ?php phpinfo(); ?>

This showed me the default configuration path of my php.ini and extensions directory, amongst a whole host of other information.

In both cases the paths were incorrect. First and foremost the configuration file path stated C:\Windows when in fact I had installed it in the root (C:\PHP5). So, although I was amending the php.ini file with the correct detail, Vista was using the default values. If there is no php.ini file in Windows, then you’ll continue banging your head against a brick wall.

The problems didn’t stop there. Moving the php.ini file to the Windows directory under Vista isn’t a simple copy and paste task. You need to be administrator. But Vista’s administrator priviledges are more pseudo than actual! In order to amend and save the php.ini file in the Windows directory, you must run Notepad as administrator and save the file as such. Voila! Everything then works. The phpinfo() function returned the correct installation detail and I could continue with the job I was meant to be doing.

PS. Thanks to Rob Douglas for his help.