Parse Twitter Hashtags, Usernames & URLs with JS

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.

tl;dr

// 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 );
  });
};