在Javascript中键入时为单个字符着色

我试图创建一个包含div（contenteditable）的html+（香草）javascript页面。用户在div中写入一个单词，然后将这个单词与另一个单词逐个字母进行比较（键入时）

让我们假设第二个单词是JAVASCRIPT。如果用户在键入时出错，错误的字母将使用样式和跨距以红色显示。例如：

JAVASTR

const$c_text=document.querySelector（“.checker_输入文本”）；
const$c_word=document.querySelector（“.checker__correctWord”）；
函数placeCaretAtEnd（el）{
el.focus（）；
如果(
typeof window.getSelection！=“未定义”&&
typeof document.createRange！=“未定义”
) {
var range=document.createRange（）；
范围。选择节点内容（el）；
范围。塌陷（假）；
var sel=window.getSelection（）；
选择removeAllRanges（）；
选择添加范围（范围）；
}else if（typeof document.body.createTextRange！=“未定义”）{
var textRange=document.body.createTextRange（）；
textRange.moveToElementText（el）；
textRange.collapse（false）；
textRange.select（）；
}
}
const c_uuword_split=$c_word.innerText.split（“”）；
常量校验字=val=>{
常数newVal=val
.拆分（“”）
.map（（ch，i）=>{
if（ch！==c\u单词\u拆分[i]）{
返回`${ch}`；
}
返回ch；
})
.加入（“”）；
返回newVal；
};
$c_text.addEventListener（“输入”，函数（e）{
this.innerHTML=checkWord（this.textContent）；
placeCaretAtEnd（本）；
});
.checker\uuuu输入文本{
利润率：10px；
边框：1px实心#ddd；
}
.checker\uuuu correctWord{
利润率：10px；
}

JAVASCRIPT
您能给我们您的HTML+JAVASCRIPT吗？尝试创建一个fiddler或post代码sample@akhilaravind请不要要求用户仅（或）在场外创建代码。虽然在一些非现场位置也有代码是可以接受的，有时也是有帮助的，但所有问题都必须是自包含的。这意味着代码必须在问题本身中。对于JavaScript/HTML/CSS，鼓励用户使用堆栈片段，它们是问答中的可执行示例。