使用JavaScript、HTML和CSS突出显示单词

我一直在尝试建立一个打字测试网站，几乎完成了。我需要做的最后一件事是突出显示用户正在键入的单词。e、 g：如果报价是“hello world”，并且用户在hello上；hello应该突出显示。我在网上找不到任何关于这个的东西。代码如下：

var input=document.getElementById（“boch”）；
input.addEventListener（“键控”，函数（事件）{
如果（event.keyCode===32）{
event.preventDefault（）；
document.getElementById（“bocho”）。单击（）；
}
});
div{
文本对齐：居中；
}
身体{
文本对齐：居中；
}
输入[类型=文本]{
宽度：100%；
填充：1%；
背景色：rgb（255、255、255）；
边界半径：10px；
}
h1{
字体系列：-苹果系统，BlinkMacSystemFont，'Segoe UI'，Roboto，Oxygen，Ubuntu，Cantarell，'Open Sans'，'Helvetica Neue'，Sans serif；
}
div{
高度：10公分；
职位：相对
}
html{
保证金：0；
位置：绝对位置；
最高：50%；
左：50%；
右：50%；
保证金权利：-50%；
转换：转换（-50%，-50%）
}
身体{
背景：线性梯度（-20度，#e73c7e，#23a6d5，#23d5ab）；
背景大小：1000000%1000000%；
}
钮扣{
左边距：自动；
右边距：自动；
字体系列：-苹果系统，BlinkMacSystemFont，'Segoe UI'，Roboto，Oxygen，Ubuntu，Cantarell，'Open Sans'，'Helvetica Neue'，Sans serif；
盒影：08px16px0rgba（0,0,0,0.2），06px20px0rgba（0,0,0,0.19）；
宽度：100px
}

答复
波乔很酷
进入
我创建了一个新版本，其中包含一个沙盒供您使用。
这个版本应该很好用

您可以单击下面的“运行代码段”进行测试


var元素=document.querySelector（“#boch”）；
element.onkeyup=函数（）{
var值=元素值；
如果（价值包括（“中银控股”））{
document.getElementById（'word-1'）。style.backgroundColor='green'；
}否则{
document.getElementById（'word-1'）.style.backgroundColor='white'；
}
如果（价值包括（“中银国际”））{
document.getElementById（'word-2'）。style.backgroundColor='green'；
}否则{
document.getElementById（'word-2'）。style.backgroundColor='white'；
}
如果（价值包括（“博乔很酷”））{
document.getElementById（'word-3'）。style.backgroundColor='green'；
}否则{
document.getElementById（'word-3'）。style.backgroundColor='white'；
}
}

波乔很酷
我真的不知道你需要什么，你的意思是要突出显示段落中的单词（区分大小写）到文本框中吗？是的。这就是我的意思，在他们正确键入并按空格之前，是否突出显示该单词？如果他们键入错误会发生什么？如果他们键入错误，突出显示将变为红色。我的方法是按字符将键入的句子排列成一个数组，然后使用onkeypress事件触发检查函数
。此函数将在每次按键后启动，并将检查用户按键是否等于字符数组的索引，如果可以使用js更改css样式。例子：