Как подсветить или изменить стиль некоторых букв в строке

let inp = document.querySelector('.input_text'); 
let invis = document.querySelector('.invis'); 
 
inp.innerHTML = color(inp.innerText); 
 
invis.addEventListener('input', function() { 
  inp.innerHTML = color(this.value); 
  this.style.height = (this.scrollHeight + 2) + 'px'; 
}); 
 
function color(txt) { 
  return txt.replace(/(\d+)/g, '<span class="number">$1</span>') 
}

.input_text { 
  display: inline-block; 
  width: 200px; 
  background-color: #22282b; 
  padding: 5px; 
  box-sizing: border-box; 
  color: #f7ed7e; 
  font-size: 18px; 
  font-family: 'Helvetica'; 
} 
 
.number { 
  color: #ed593c; 
} 
 
.invis { 
  position: absolute; 
  left: 0; 
  width: 200px; 
  padding: 4px; 
  font-size: 18px; 
  font-family: 'Helvetica'; 
  box-sizing: border-box; 
  background-color: transparent; 
  color: transparent; 
  caret-color: #f7ed7e; 
  outline: none; 
  border: 1px solid red; 
  resize: none; 
  overflow: hidden; 
}

<div style="position: relative"> 
  <span class="input_text" spellcheck="false" contenteditable>1235aa2323aa</span> 
  <textarea class="invis" spellcheck="false">1235aa2323aa</textarea> 
</div>

$(document).ready(function() { 
  $(".my-text").keydown(function(event) { 
    const parElem = $(".my-text") 
    event.preventDefault(); 
    let newEl; 
    const kCode = event.keyCode; 
    if (kCode >= 48 && kCode <= 57) { 
        newEl = `<span class="num">${String.fromCharCode(kCode)}</span>`; 
        } else { 
          newEl =`<span class="str">${String.fromCharCode(kCode)}</span>`; 
        } 
    if(kCode === 8) { 
      $('span').last().remove(); 
    } else { 
      parElem.html(parElem.html() + newEl) 
    } 
     
  }); 
});

.num { 
  color: red; 
} 
.str { 
  color: blue; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<p class="my-text" contenteditable="true"> 
  text 
</p>