JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="sample-text">

</textarea>
<div class="text-view">

</div>

CSS

textarea {float:left; width:300px; height:150px;}
.text-view {float:left; width:300px; height:150px;}
.text-view span {background-color:red;}

JavaScript

$('#sample-text').on('keyup', function () {

    var text = $('#sample-text').val();
    
    //This removes all the text currently in the element
    $('.text-view').html('').append(text);
    
    var result = $('.text-view').html();
    
    var result = result.replace(/1/g, '<span> 1 </span>')
        .replace(/2/g, '<span> 2 </span>')
        .replace(/3/g, '<span> 3 </span>')
        .replace(/4/g, '<span> 4 </span>');
    
    $('.text-view').html(result); 
    
});