JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="testApp" ng-controller="AppController">
      <p ng-repeat="n in arrayChat">
      <span class="name">{{n.time}}</span>: <span>{{n.msg}}</span> 
    </p>
    <p ng-repeat="n in arrayChat">
      <span class="name">{{n.time}}</span>: <span chat-Msg>{{n.msg}}</span> 
    </p>
  </body>

CSS

.name {
  color: green;
}
[chat-Msg] i {
  font-size: 50px;
  font-weight: bold;
  color: red;
  background: black;
}

JavaScript

var myApp = angular.module("testApp", []);

myApp.directive('chatMsg', function() {
	return {
		restrict: 'A',
		link: function(scope, element, attributes ) {
			element.html(scope.n.msg.replace(/(\d+)/gi, '<i>$1</i> '));
		}
	};
});

myApp.controller("AppController", function ($scope) {
	$scope.arrayChat = [
  	{time : "11:00", msg : "Message 1"},
  	{time : "11:00", msg : "Message 2"},
  	{time : "11:00", msg : "Message 123, 456"}
  ];
});