Parsing Twitter Usernames, Hashtags and URLs with JavaScript

Monday, 21st July 2008 by Simon. Average Reading Time: about 4 minutes.

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.

Demo

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.

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.

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

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>

Other articles I recommend

Some time ago, well almost a year ago actually, I posted an article called Parsing Twitter Usernames, Hashtags and URLs with JavaScript. From that article, it became immediately apparent that this was an issue many people were confronting and one that required an answer. Now, belatedly, it is the turn of ColdFusion to get the Twitter love.

Creating an autocomplete form field historically has not been a trivial matter and would require an indepth knowledge of JavaScript and CSS. However, the task is made far more simple when using one of the many freely-available JavaScript libraries. In this post I will show you how to implement the jQuery Autocomplete created by Dylan Verheul.

Catherine Mortali

Great info!

I’m using the ParseURL function on a block of text that I’m passing using a CF variable. It’s only grabbing the first URL and creating the hyperlink, not the whole text.

@Catherine, the post relates to pure JavaScript. If you need to use a ColdFusion variable, you need to make it available in the DOM for JavaScript to ‘read’ and then parse.

Amanda

How would I use the parseURL function with a form submission? I want to be able to have a user enter some information in a text area, and if they included any urls, I need to use the parseURL function on them.

My code:

Tips:

tips ?>

I also tried using onSubmit and using just tips.parseURL…
I am not very good with Javascript yet, so maybe you could explain what I’m supposed to do to get this to work properly?

Thanks a lot!

Amanda

oh, sorry lol the html was used as html…here it is:

Tips:
tips ?>

hopefull this’ll show up…sorry about that!

Amanda

and it didn’t….I don’t know how to show you the code then…

I was using a textarea with id=”tips” and was trying to call the parseURL method with onClick on the submit button .. onClick=”document.write(tips.parseURL())” and also tried onSubmit instead of onClick and just tips.parseURL() as well

Steve

Howdy! Thanks for the article.

So how do I assign the contents of the JSON packet to a variable? Right now I’m using the little patch of Javascript that Twitter provided to display a few Twitter items, but I’m not sure how to actually execute these functions on that data. Is there a way to assign the content to a variable, so I can run these functions on it?

@amanda I would suggest using a server-side code to parse the URLs on form submission rather than JavaScript, ‘on the fly’. However, you could use jQuery (or other JavaScript framework) and the above String methods to manipulate the contents of the textarea on an event such as onblur.

I don’t see that anyone else has mentioned this, but it looks like the javascript doesn’t handle multiple hashtags (I haven’t tested out multiple @usernames yet).
For example: http://twitter.com/theadb/statuses/1429168203
Any thoughts on how that might be handled?

Thanks Simon, this was very very usefull! I’m not a real programmer but sometimes I have an idea and like to try to realize it. This helped me so much.
@Mark Quenzada, great! I had the same problem with multiple hashes and urls, this works like a charm. Happy person here

jim jim

Thank you so much for this script. It is so helpful and saved me many hours and headaches.

All of the patterns used in here will match things that look like twitter elements but are not, for example # that’s part of a URL, @ that’s part of an email address. They also match misformatted items like @@ and ##. Eduardo Cancino suggested a fix that won’t really work as it will only match at the start of a string (which will catch most replies); you need to enforce that they are not preceeded by a word boundary. Twitter user names can’t contain ‘-‘, so that should not be included in the class (which is wrong anyway as ‘-‘ has a special meaning unless it’s the last character in a range). Conveniently, the chars allowed in a twitter id are exactly those included in the w class. Twitter IDs are limited to 20 characters, so anything that’s over 20 chars is not a twitter ID, so the pattern should assert that too.

Hashtags are not limited to ASCII, so a better pattern for that should allow anything but whitespace (and by experimentation with twitter’s own client, some punctuation, extend as you like).

Great post, this solved my exact problem. However, I still can’t figure out how to make the links open up in a new window/tab. How can we modify the parseURL() function to set the target attribute of the anchor tag to _blank?

Thanks,

-Eric

Eric Atallah

Hello,

Is there anyway to add: target=”_blank” to the hyperlink so it opens in a new window/tab?