JSFiddle - React, Tailwind, and code Playground

HTML

<textarea name="inputarea" id="inputarea" cols="30" rows="10"></textarea>
<div id="result"></div>

CSS

#result{
	  	color: lightgrey;
        word-wrap: break-word;
        overflow: scroll;
        width: 200px;
        height: 200px;
        border: 1px solid black;
  	}
  	
  	#result span{
	  	color: black;
  	}
  	
  	#result .digits{
		font-weight: bold;
  	}
  	
  	#result .samechars{
	  	color: red;
  	}

JavaScript

var $area = document.getElementById("inputarea");
  var $result = document.getElementById("result");
  
  $area.addEventListener("keyup", onAreaKeyUp);
  
  function onAreaKeyUp(event){
		
	  var areaVal = $area.value; // Текста от полето
	  var digitGroups = areaVal.match(/([\d]+)/g); // \d мачва цифри, а + e една или повече - http://www.regexr.com/ . Връща Array, със полетата от цифри ( виж сайта как бачкат регексовете )
	  var resultHtml = areaVal;  

	  if(digitGroups && digitGroups.length){		 // Ако имаме мачнати цифри
		  
		  var biggestSame = "";				//за после
		  var biggestNechetni = "";			// за после
		  
		  digitGroups.forEach(function(digitGroup, index){	//луупваме през всеки Mach
		  
		     var spanClass = "digits";			//класовете, които ще добавяме към спана
			
			 var firstChar;						//първата буква
			 var isSameChars = true;			//флаг, дали са еднакви
			 var areAllNechetni = true;			//флаг, дали са нечетни
			 
				 
			 //Are all numbers the same
			 for(var i=0, j=digitGroup.length; i<j; i++){		//лууп за всяка цифра от поредицата
				 
				 //Code for same chars
				 if(i == 0){				
					 firstChar = digitGroup[0]; //get the first character
				 } else {
					 if(digitGroup[i] != firstChar){		//ако някоя от цифрите не е същата като първите, сетваме флага на false 
						 isSameChars = false;
					 }
				 }
				 
				 //Code for nechetni
				 if(parseInt(digitGroup[i]) % 2 == 0){		// акоя някое цифра от поредицата е четна, сетваме флага на false
					 areAllNechetni = false;
				 }
				 
			 }
			 
			 //Are all numbers even
			 
			 
			 //
			 if(isSameChars){
				spanClass += " samechars"; 		// ако флага ни е true, добавяме още 1 клас
			 }
			 
			 if(areAllNechetni){
				 spanClass += " nechetni"; 		// ако флага на нечетните е true, добавяме още 1 клас
			 }
			 
			 //Резултата, реално заместваме всяка поредица от цифри със същото, но оградено в спан с класовете, които искаме 
			 resultHtml = resultHtml.replace(digitGroup, "<span...