JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.3.94/jquery.marquee.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
  <li ng-repeat="item in data ">
    <span ng-bind-html="item.title | highlight:arrayFilter"></span>
  </li>

  <div class='marquee' ng-bind-html="text | highlight:arrayFilter:true">mom is beautifull</div>
</div>

CSS

.highlightedText {
  background: yellow;
}

.marquee {
  width: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
}

JavaScript

var app = angular.module('testApp', []);
 app.controller('testCtrl', function($scope) {
   $scope.arrayFilter = ["is", "mom", "beautifull", 'beer', 'hate'];
   $scope.data = [{
     title: "mom is beautifull"
   }, {
     title: "my mom is great"
   }, {
     title: "I hate the matematics"
   }];

   $scope.text = 'If it works, i need a beer';
 });

 app.filter('highlight', function($sce) {
   return function(text, arrayFilter, isMarquee) {
     angular.forEach(arrayFilter, function(key, value) {
       if (text.includes(key)) {
         text = text.replace(new RegExp(key, 'gi'), '<span class="highlightedText">$&</span>')
       }
     })
     if (isMarquee)
     //marquee
       $('.marquee').marquee({
       duration: 5000
     });
     return $sce.trustAsHtml(text);

   }
 });