Javascript 如何重新创建与附加引用的高亮显示相同的效果？

我正在做一个打字游戏，我试着模仿同样的效果，突出显示要键入的字符，就像在中一样。然而，这比我想象的要难

我创建了一个代码，它使用replace函数为角色提供样式。但是，它只替换角色的第一个实例和其他实例，不会执行它应该执行的操作

const originTextDiv =  document.getElementById('origin-text'); //the div that was supposed to be highlighted.

function spellCheck() {

let textEntered = textArea.value;
    //let textCharEntered = textEntered.split("");
    let originTextMatch = originText.substring(0, textEntered.length);
    // console.log(textEntered);
    var key = event.keyCode || event.charCode;
    originChar = originText.split("");
    //console.log(originTextDiv);
    char = originTextDiv.textContent; 
    //console.log(char);

   console.log(originChar[index]);
     //console.log(textCharEntered);
    if (textEntered == originText) {
        textWrapper.style.borderColor = 'orange';

        $("#myModal").modal();
        stop();
    } else {
        if (textEntered == originTextMatch) {
            textWrapper.style.borderColor = 'green';
            textArea.style.backgroundColor = 'white';
            //  if (!(key == 20 || key == 16 || key == 18 || key == 8 || key == 46 || key ==17 )){
                originTextDiv.innerHTML = char.replace(originChar[index], '<span style="background-color:green;">' +originChar[index]+ '</span>'); //here is the code where it is highlighting
                ++index;
            //  }
            // if (key == 8 || key == 46){
            //     --index;
            // }
        } else {
            textWrapper.style.borderColor = 'red';
            textArea.style.backgroundColor='f23a49';
            originTextDiv.innerHTML = char.replace(originChar[index], '<span style="background-color:red;">' +originChar[index]+ '</span>');
            if (!(key == 8 || key == 46)){
                error++;
            }
        }
    }

}

const originTextDiv=document.getElementById（'origin-text'）//应该突出显示的div。
函数拼写检查（）{
让text输入=textArea.value；
//让textCharEntered=textcentered.split（“”）；
让originTextMatch=originText.substring（0，textcentered.length）；
//console.log（文本输入）；
var key=event.keyCode | | event.charCode；
originChar=originText.split（“”）；
//console.log（originTextDiv）；
char=originTextDiv.textContent；
//console.log（char）；
log（originChar[index]）；
//console.log（textCharEntered）；
如果（text输入==原始文本）{
textWrapper.style.borderColor='橙色'；
$（“#myModal”）.modal（）；
停止（）；
}否则{
if（textEntered==originTextMatch）{
textWrapper.style.borderColor='绿色'；
textArea.style.backgroundColor='白色'；
//如果（！（键==20 | |键==16 | |键==18 | |键==8 | |键==46 | |键==17））{
originTextDiv.innerHTML=char.replace（originChar[index]，“”+originChar[index]+“”）；//下面是它高亮显示的代码
++指数；
//  }
//如果（键==8 | |键==46）{
//--指数；
// }
}否则{
textWrapper.style.borderColor='red'；
textArea.style.backgroundColor='f23a49'；
originTextDiv.innerHTML=char.replace（originChar[index]，“”+originChar[index]+“”）；
如果（！（键==8 | |键==46））{
错误++；
}
}
}
}

我希望它能按预期工作，但我不知道replace只会替换第一个实例。我试图查看javascript的replaceAt函数，但当我尝试它时，replaceAt也替换了附加的span标记。有没有人能给我一些建议，告诉我如何重现与上述参考相同的效果