Question

So, I was looking at how other web pages have this sorted out, and i found http://www.phppennyauctiondemo.com/ (below auctions, there’s twitter updates part).

They format their twitter statuses the following way before outputing it to a web page:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">
...
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
  return '<a href="'+url+'">'+url+'</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
  return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
...
</script>

My question is: why? And what does this do?

Also, should I do it aswell? Until now, I’ve used only twitters[i].text. Without any formating.

Answer 1

replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
  return '<a href="'+url+'">'+url+'</a>';
})

This makes urls in the tweet clickable by addind a <a> tag around them.

replace(/\B@([_a-z0-9]+)/ig, function(reply) {
  return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
})

This makes @names clickable by adding <a> tag around them, which allows people to reply to the tweet.

You can skip that formatting, but displaying unclickable urls to your users is not a good usability practice. The ability to click on the tweet author’s name is very convenient too.