As part of the Chatterbloc project we had a requirement to do a couple of things:

1. Reformat www. links with http://www.
2. Replace http:// strings with an HTML A link equivalent

Surprisingly I found it pretty hard to find a hard and fast solution for this that had already been done, so I either wasn’t looking properly, or it doesn’t exist. Anyway, I created two functions for this piece of work, I’ll show you those, and also how to use them.

Convert www to http://www

So my first problem was to change www.google.com to http://www.google.com. I came up with the solution below as a function:

function replacewww(text) {

var start = (text.indexOf("www"))-7;
var match = text.substr(start,7);
if(match != "http://" && match != "ttps://")
{
text = text.replace("www", "http://www");
}

return text;
}

This is quite a basic string manipulation – literally looking for an index of www in my text string, and taking out the match -7 characters. That will tell me whether there is http:// or https:// in front of the www. If there isn’t, the function replaces the www with http://. What this function doesn’t do is know whether it should be http:// or https://, it assumes http:// is the more likely candidate.

Convert links to HTML A HREFs

The next part is where I needed a regular expression to hunt down the start and end of a URL, and replace it with the HTML equivalent, ie

<a href="http://www.google.com">http://www.google.com</a>

The reason why I used a regular expression was that it was increasingly difficult to find the end of a url using string manipulation, it was never guaranteed (you could argue the same with regular expressions), however I found that I had much more success with using a regular expression match to make it happen:

function replaceURLWithHTMLLinks(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
return text.replace(exp,"<a href='$1' target='_blank'>$1</a>");
}

This function simply does a string replace based on a regular expression match. The $1 part is obviously the matched element, ie the URL which is placed where necessary within the HTML tags.

Making it happen

So, the reason why I separated these two functions was because I would actually not always require both of them at the same time, so it made sense in my implementation to keep them as two. You could however, push them all into one function for ease of use.

Anyway, I’m sure its obvious on how to make this work, however I’ll show you so it’s quite clear.

var newHTML;
var stringInput = "Check out this link www.google.com";

newHTML = replacewww(stringInput);
newHTML = replaceURLWithHTMLLinks(newHTML);

document.write(newHTML);
}

Conclusion

I hope you found this basic tutorial helpful… As I like to mention – I’m here to help the common man/woman, more than the über nerd, so I hope this article was a nice fit for what you needed. Look forward to hearing from you as always…

Tools to help you learn…

Learning jQuery 1.3	Amazon Kindle 2	jQuery UI 1.6

This entry was posted on Friday, March 6th, 2009 and is filed under Development, Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.