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
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>
Pretty blog, so many ideas in a single site, thanks for the informative article, keep updating more article.
ReplyDeleteWebdesining course in chennai
PLC Training in Chennai | PLC Training Institute in Chennai | PLC Training Center in Chennai | PLC SCADA Training in Chennai | PLC SCADA DCS Training in Chennai | Best PLC Training in Chennai | Best PLC Training Institute in Chennai | PLC Training Centre in Chennai | Embedded System Training in Chennai | Embedded Training in Chennai | VLSI Training in Chennai | VLSI Training Institute in Chennai
ReplyDeletePLC Training in Chennai | PLC Training Institute in Chennai | PLC Training Center in Chennai | PLC SCADA Training in Chennai | PLC SCADA DCS Training in Chennai | Best PLC Training in Chennai | Best PLC Training Institute in Chennai | PLC Training Centre in Chennai | PLC SCADA Training in Chennai | Automation Training Institute in Chennai | PLC Training in Kerala | VLSI Training in Chennai | Best VLSI Training in Chennai | VLSI Training Centres in Chennai | VLSI Courses in Chennai | VLSI Training Courses in Chennai | VLSI Training Institute in Chennai | VLSI Training Institutes in Chennai | Best VLSI Training Institute in Chennai
ReplyDeleteEmbedded Training in Chennai | Best Embedded Training in Chennai | Embedded System Training in Chennai | Embedded System Training Institute in Chennai | Best Embedded System Training Institute in Chennai | Embedded Course in Chennai | Embedded System Training Institutes in Chennai | Embedded System Training Center in Chennai | Best Embedded System Training in Chennai | Embedded Systems Training in Chennai | VLSI Training in Chennai | VLSI Training Institute in Chennai
ReplyDeleteYour 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
ReplyDeleteNowadays, 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.
ReplyDeletefree Studio One Professional 4 Crack
free WinThruster 2018 Crack