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.
Published
Typical Read
3 minutes
Share on facebook
Share on twitter
Share on linkedin
Sponsored Advertisement
Get 20% off undies! Sponsored by MeUndies.

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 );
  });
};
Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

All comments posted on 'Parse Twitter Hashtags, Usernames & URLs with JavaScript — auto-linking is easy!' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.