AngularJS: formattare il testo e le date dei tweet di Twitter

AngularJS: formattare il testo e le date dei tweet di Twitter

Per formattare il testo e le date dei tweet di Twitter possiamo creare dei filtri in AngularJS.

I filtri sono i seguenti:


angular.module('TwitterFilters', []).filter('tweetify', function($sce) {
	return function(text) {
			text = text.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi, '<a href="$1">$1</a>')
            .replace(/(^|\s)@(\w+)/g, '$1<a href="https://twitter.com/$2">@$2</a>').replace(/(^|\s)#(\w+)/g, '$1<a href="https://twitter.com/hashtag/$2?src=hash">#$2</a>');
		return $sce.trustAsHtml(text);
	}
}).filter('relativeTime', function() {
    return function(text) {
            var values = text.split(' ');
            var timeValue = values[1] + ' ' + values[2] + ', ' + values[5] + ' ' + values[3];
            var parsedDate = Date.parse(timeValue);
            var relativeTo = new Date();
            var delta = parseInt((relativeTo.getTime() - parsedDate) / 1000);
                delta = delta + (relativeTo.getTimezoneOffset() * 60);

            if (delta < 60) {
                return 'less than a minute ago';
            } else if (delta < 120) {
                return 'about a minute ago';
            } else if (delta < (60 * 60)) {
                return (parseInt(delta / 60)).toString() + ' minutes ago';
            } else if (delta < (120 * 60)) {
                return 'about an hour ago';
            } else if (delta < (24 * 60 * 60)) {
                return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
            } else if (delta < (48 * 60 * 60)) {
                return '1 day ago';
            } else {
                return (parseInt(delta / 86400)).toString() + ' days ago';
            }
    }   
});

Li includiamo nel modulo principale della nostra app:


angular.module('MyApp', ['TwitterFilters']);

usandoli come segue:


<div class="tweet" ng-repeat="tweet in tweets">
	<time>{{tweet.created_at | relativeTime}}</time>
	<p ng-bind-html="tweet.text | tweetify"></p>
</div>

Torna su