Parse Twitter Hashtags, Usernames & URLs with JavaScript — auto-linking is easy!

Using the Twitter API? Need to parse links in tweets? Autolinking user tweets is a cinch with JavaScript! In this post, I’ll show you the method I used when building Twitscreen to display real-time tweets.

As part of the rebuild for Twitscreen, I wanted to parse Twitter hashtags, usernames and URLs on the frontend vs. the backend. The purpose was to help simplify the Twitscreen API responses making it less error-prone when future updates to the Twitter API are made. Plus, I was using React so feeling extra… JavaScripty. My solution, JavaScript prototype objects.

For the lazy readers and fans of the copy & paste, here’s the code:

// Auto-link URLs in a string
// Usage: mystring.parseURL()
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 );
  });
};

// Auto-link Twitter usernames in a string
// Usage: mystring.parseUsername()
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 );
  });
};

// Auto-link Twitter hashtags in a string
// Usage: mystring.parseHashtag()
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 );
  });
};

Parse Twitter Hashtags, Usernames & URLs with Prototype Objects in JavaScript

Tweets come with all kinds of actionable elements inside them — shortened URLs, #hashtags, @replies, and the actual message body. When you’re using the Twitter API, it’s important to be able to parse out these elements from the plain text so that they can be made into hyperlinks and directed at the proper location.

The code above uses what are called Prototype Objects. It’s purpose is to auto-magically parse different types of links within a text string. When using all three in conjunction with a tweet from a Twitter JSON object, it’ll auto-link standard URLs, Twitter usernames and hashtags.

What are Prototype Objects in JavaScript?

Basically a 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. That’s a mouth-full I know, but here’s an example: There isn’t a trim() method available on the String class. Through the wizardry of regular expressions and the prototype property, we can add one. You simply need to specify String.prototype before your method definition:

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.

Parse Twitter Hashtags with JavaScript

Twitter allows user’s to create hashtags in their tweets. Hashtags are a community-driven convention for adding additional context and metadata to your tweets. Like regular URLs and usernames, hashtags can been parsed as a URL, in this case, Twitter’s search.

The regular expression in this case finds all instances of #hashtag. The Twitter Search URL is then applied to the hashtag.

// Auto-link Twitter hashtags in a string
// Usage: mystring.parseHashtag()
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 );
  });
};

Parse Twitter Usernames with JavaScript

In this regular expression, it 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.

// Auto-link Twitter usernames in a string
// Usage: mystring.parseUsername()
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 );
  });
};

Parse Twitter URLs with JavaScript

In this example, 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.

// Auto-link Twitter usernames in a string
// Usage: mystring.parseUsername()
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 );
  });
};

Author: Ben Marshall

Red Bull Addict, Self-Proclaimed Grill Master, Entrepreneur, Workaholic, Front End Engineer, SEO/SM Strategist, Web Developer, Blogger

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.