JSFiddle - React, Tailwind, and code Playground

HTML

<div id="str_enter"></div>
	<div id="str_out"></div>
	<div id="str_in">тестовая строка</div>

CSS

body{
	margin: 0;
	padding: 0;

}


#str_in{
	position: absolute;
	top:100px;
	width: 500px;
	border: 1px solid #000;
	padding: 10px;
	text-align: center;
	height: 30px;
	font-size: 30px;
}

.success{	

	color:#cedee5;
}

JavaScript

// event.type должен быть keypress
function getChar(event) {
  if (event.which == null) {  // IE
    if (event.keyCode < 32) return null; // спец. символ
    return String.fromCharCode(event.keyCode) 
  } 

  if (event.which!=0 && event.charCode!=0) { // все кроме IE
    if (event.which < 32) return null; // спец. символ
    return String.fromCharCode(event.which); // остальные
  } 

  return null; // спец. символ
}

$(document).ready(function(){
	var str_in, char_e;
	var text = $("#str_in").html().split('');
	var inputText = new Array();
	var counter = -1;

	$('body').on('keypress', function(e){
		counter++;
		inputText.push(getChar(e));
		if(getChar(e) == text[counter]){

			char_e = (getChar(e) == ' ') ? ' ' : '<span class="success">' + getChar(e)+ '</span>';
			
			console.log(inputText);
				str_in = $("#str_in").html().replace(new RegExp( getChar(e)+"(?=[^<]+|$)"), char_e);    
			$("#str_out").append(getChar(e));
			$("#str_in").html(str_in);
			}
		else{
			console.log('no ok');
		}
	});
});