SodhanaLibrary

This Angular Component converts plain text tweets into real tweets. This component is responsible for parsing the tweets and handles transform mention (@sodhanalibrary), hashtags (#AngularJS) and URLs inserted in the tweet in functional URLs. This was created based on jquery-tweet-parser

Source Code           DEMO

Angular Component

This is the Angular Component which you can use it for converting plain text to real tweets

import { Component, Input } from '@angular/core';

@Component({
    selector: 'tweetParser',
    template: `<div [innerHTML]="myHtml"></div>`
})
export class TweetParser {
    @Input('urlClass') urlClass: string = 'react-tweet-parser__url';
    @Input('userClass') userClass: string = 'react-tweet-parser__user';
    @Input('hashtagClass') hashtagClass: string = 'react-tweet-parser__hashTag';
    @Input('target') target: string = '_blank';
    @Input('searchWithHashtags') searchWithHashtags: boolean = true;
    @Input('parseUsers') parseUsers : boolean = true;
    @Input('parseUrls') parseUrls :  boolean = true;
    @Input('parseHashtags') parseHashtags: boolean = true;
    @Input('tweet') tweet: string = '';

    myHtml: string = '';
    constructor() {
    }

    generateLink(url, urlClass, target, text) {
      return `<a href="${url}" className="${urlClass}" target="${target}">${text}</a>`;
    }

    ngOnChanges() {
      this.parseTweet();
    }

    ngOnInit(){
      this.parseTweet();
    }

    parseTweet() {
     const {urlClass, userClass, hashtagClass, target, searchWithHashtags, parseUsers, parseUrls, parseHashtags} = this;

     const REGEX_URL = /(?:\s)(f|ht)tps?:\/\/([^\s\t\r\n<]*[^\s\t\r\n<)*_,\.])/g, //regex for urls
                REGEX_USER = /\B@([a-zA-Z0-9_]+)/g, //regex for @users
                REGEX_HASHTAG = /\B(#[á-úÁ-Úä-üÄ-Üa-zA-Z0-9_]+)/g; //regex for #hashtags
     let searchlink, myTweet = this.tweet; //search link for hashtags
      //Hashtag Search link
     if (searchWithHashtags) {
          //this is the search with hashtag
          searchlink = "https://twitter.com/hashtag/";
      } else {
          //this is a more global search including hashtags and the word itself
          searchlink = "https://twitter.com/search?q=";
      }
      //turn URLS in the tweet into... working urls
      if (parseUrls) {
          myTweet = myTweet.replace(REGEX_URL, (url) => {
              let link = this.generateLink(url, urlClass, target, url);
              return url.replace(url, link);
          });
      }
      //turn @users in the myTweet into... working urls
      if (parseUsers) {
          myTweet = myTweet.replace(REGEX_USER, (user) => {
              let userOnly = user.slice(1),
                  url = `http://twitter.com/${userOnly}`,
                  link = this.generateLink(url, userClass, target, user);
              return user.replace(user, link);
          });
      }
      //turn #hashtags in the myTweet into... working urls
      if (parseHashtags) {
          myTweet = myTweet.replace(REGEX_HASHTAG, (hashtag) => {
              let hashtagOnly = hashtag.slice(1),
                  url = searchlink + hashtagOnly,
                  link = this.generateLink(url, hashtagClass, target, hashtag);
              return hashtag.replace(hashtag, link);
          });
      }

      this.myHtml  = myTweet;
   }
}