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

Usage

<tweetParser [tweet]="myTweet" urlClass="myUrlClass"></tweetParser>

28 comments:

  1. Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
    Webdesining course in chennai

    ReplyDelete
  2. Your article is detailed, thanks to it I solved the problem I am entangled. I will regularly follow your writers and visit this site daily slope game

    ReplyDelete
  3. Nowadays, games have rewards programs that you may need to use real money to get. Make sure you choose the right option! On one hand, there is not much more enjoyment in playing. Then again, they may save a bit of time.
    free Studio One Professional 4 Crack
    free WinThruster 2018 Crack

    ReplyDelete
  4. Really informative article.Really looking forward to read more. Really Cool.
    โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
    เพียงแค่คุณสมัคร Gclub กับทางทีมงานของเราเพียงเท่านั้น
    ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
    สมัครสล็อตออนไลน์ >>> goldenslot
    สนใจร่วมลงทุนกับเรา สมัครเอเย่น Gclub คลิ๊กได้เลย

    ReplyDelete
  5. Im grateful for the blog post.Really thank you!
    เว็บไซต์คาสิโนออนไลน์ที่ได้คุณภาพอับดับ 1 ของประเทศ
    เป็นเว็บไซต์การพนันออนไลน์ที่มีคนมา Gclub Royal1688
    และยังมีหวยให้คุณได้เล่น สมัครหวยออนไลน์ ได้เลย
    สมัครสล็อตออนไลน์ได้ที่นี่ >>> Golden slot
    ร่วมลงทุนสมัครเอเย่น Gclubกับทีมงานของเราได้เลย

    ReplyDelete
  6. Things are very open and intensely clear explanation of issues. was truly information. Your website is very beneficial.
    hotmail login

    ReplyDelete
  7. This is really a great stuff for sharing. Keep it up . Thanks for sharing.
    gmail login

    ReplyDelete
  8. Attend The Data Analytics Courses From ExcelR. Practical Data Analytics Courses Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Data Analytics Courses.
    ExcelR Data Analytics Courses

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Help full post, lots of information about it. Thank you admin for providing this information.

    ReplyDelete
  11. Thank you so much for the sharing article. I have been reading your articles and they are really very helpful for the user. It’s a very nice blog on
    Digital exhibition
    Online trade fair
    online events
    digital events
    digital trade fair
    Upcoming Online events
    upcoming exhibitions
    Explore Best Online Events

    ReplyDelete

  12. อยากมีเงินใช้ เงินเที่ยว เกมเล่นสนุกๆ slot online สล็อตออนไลน์ เล่นง่ายๆ เล่นสล็อต แจกฟรีเครดิตสล็อต slotxo ฟรีเครดิต ได้เงินจริง เล่นเลยที่นี่ คลิกเลย
    https://www.slot2xl.com/

    ReplyDelete
  13. Thanks for sharing these wonderful informations. I really appreciate your hardwork. Keep it up. We buyjunk cars and truck

    ReplyDelete
  14. Your site is in reality extremely alluring. Your own course is really immense. We should be existing by and by there. I'm agreeable along with your distribute. I'll go to an individual with respect to considerably more reconsider. Much obliged! Printer Repair

    ReplyDelete
  15. ยินดีต้อนรับเข้าสู่ Click1234 สุดยอดเว็บแทงหวยออนไลน์ที่ดีที่สุดของประเทศไทย เว็บหวยออนไลน์อันดับ1 ของเมืองไทย ด้วยระบบที่ทันสมัย อยู่ที่ไหนก็เล่นได้ เล่นง่ายแค่ปลายนิ้ว อีกทั้งยังสามารถยกเลิกตั๋วด้วยตัวเอง เล่นง่ายไม่มีเลขอั้น ใหม่พร้อมเวอร์ชั่นโมบาย รองรับสมาร์ทโฟนทุกรุ่น ทำให้ไม่พลาดทุกเลขเด็ด สมัครสมาชิกฟรี ไม่เสียค่าใช้จ่าย เล่นง่ายไม่มีขั้นต่ำ เปิดรับการเล่นถึง 15.25น. มั่นคง ปลอดภัย 100% เล่นง่ายจ่ายจริงรับเงินเร็ว ไม่มีโกงแน่นอน “ท้าให้คุณลอง เปิดให้คุณเล่น หวยออนไลน์ยุคใหม่ อยู่ที่ไหนก็เล่นได้”

    ติดตามเรื่องราวและบทความเกี่ยวกับลอตเตอรี่ได้อีกที่ https://onlinelotterys.livejournal.com/

    ReplyDelete
  16. Nice Blog.

    We Are The Best Canada Immigration Consultants in India,Offering Canada Visa Assistance for Those Who Are Under the process of Immigration to Canada.

    For more Details Please follow below link

    https://www.canaanservices.in/

    ReplyDelete
  17. For getting best feed for animal,fish and poultry
    Pashu ahar in Bihar

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts