JSFiddle - React, Tailwind, and code Playground

by ganarajpr

HTML

<div ng-app="app">
    <div ng-controller="Ctrl">
        <span convert="link line-break">{{text}}</span>
    </div>
</div>

JavaScript

var app = angular.module('app', []);

app.factory('utils', function() {
    return {
        replaceLink: function(value) {
            var t = value;
            return t.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig,'<a href="$1" target="_blank">$1</a>');
        },
        replaceLineBreak: function(value) {
            return value.replace(/\n/g, '<br/>');
        }
    }
});
    
app.directive('convert', function(utils) {
    return {
        restrict: "A",
        link: function(scope, element, attrs) {
            var content;
            scope.$watch("",function(){
            if(content !== element.html())
            {
                var pieces = attrs.convert.split(" ");
                for ( var i = 0 ; i < pieces.length;i++)
                {
                    switch (pieces[i]){
                        case "line-break":
                            element.html(utils.replaceLineBreak(element.html()));
                        break;
                        case "link":
                            element.html(utils.replaceLink(element.html()));
                        break;
                    }                        
                }
                content = element.html();                
            }               
            
            });
            
        }
    }
});

function Ctrl($scope) {
    $scope.text = "This is a text\nThis is a new line\n http://t.co/SVmTWp1c";
}