JSFiddle - React, Tailwind, and code Playground

by Varun Krishna P

HTML

<div ng-app='tt'>
    <div ng-controller='ctrl'>
        <h1>The list of words : {{theList}}</h1>
        <div validate list="{{theList}}"></div>
    </div>
</div>

CSS

.hi
{
    color:red;
    font-weight:bold;
}

JavaScript

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

tt.controller('ctrl', function($scope){
    
    $scope.theList=Array("grub","slurd","zlop","kimpo","agaga")
    
});
              
tt.directive('validate', function(){
    return {
        restrict:'A',
        template:'<p><span ng-bind-html-unsafe="theDisplayedText"></span><br/>{{count}} words corresponding</p>',
        replace:false,
        compile:function(elt,attr){ 
            var inp=new angular.element('<input>')
            inp.attr('type','text')
            inp.attr('ng-model','theText');
            inp.attr('ng-change','changed()');
            elt.append(inp)

       return {
            pre: function preLink(scope, iElement, iAttrs, controller) { 
            
            },
            post: function postLink(scope, iElement, iAttrs, controller) { 
                scope.count=0;
                var copyOfWords= new Array(iAttrs['list'])//the list to compare with
                
                scope.changed=function(){
                    var alreadyIn=Array();
                    scope.theDisplayedText=angular.copy(scope.theText);
                    var sliced=scope.theText.split(" ");//we get each word
                    scope.count=0
                    for(var i=0;i<sliced.length;i++){
                            if(sliced[i].length>3 && copyOfWords.indexOf(sliced[i])!=-1 && alreadyIn.indexOf(sliced[i])==-1)//the word exists and isn't counted yet
                            {
                                scope.count+=1//incrementing the counter
                                alreadyIn.push(sliced[i])//avoiding doubles
                                sliced[i]="<span class='hi'>"+sliced[i]+"</span>"
                                 console.log(alreadyIn);
                            }
                    }
                    scope.theDisplayedText=sliced.join(" ");
                    copyOfWords=iAttrs['list']//the list to compare with
                }            
            }
          }
     ...