Javascript：根据单词更改单词颜色？

对不起，这是一个令人困惑的问题

我想根据单词是什么来改变句子中单词的背景颜色

我希望用户能够输入类似文本区域的单词，但文本区域不支持单词背景颜色

目前，我只能想到这样的超级盗版解决方案：

var div=document.getElementById（“div”）；
函数高亮显示（）{
var words=div.textContent.split（“”）；
div.innerHTML=“”；
for（var i=0；i
div{
背景色：黑色；
框大小：边框框；
颜色：白色；
高度：128px；
填充：16px；
宽度：100%；
}
好的颜色和坏的颜色
尝试使用数组方法，它们比
用于
循环要好得多：


const div=document.getElementById（“div”）；
函数高亮显示（）{
const words=div.textContent.split（“”）；
div.innerHTML=“”；
words.forEach（（word）=>{
const span=div.appendChild（document.createElement（'span'）；
span.textContent=word+“”；
if（word=='good'）span.classList.add（'green'）；
如果（word=='bad'）span.classList.add（'red'）；
});
};
div.addEventListener（“模糊”，高亮显示）；
突出显示（）
div{
背景色：黑色；
框大小：边框框；
颜色：白色；
高度：128px；
填充：16px；
宽度：100%；
}
格林先生{
背景颜色：绿色；
}
瑞德先生{
背景色：红色；
}
好的和坏的颜色
谢谢你，但我真的只是在寻找一个更好的方法。我觉得以这种方式使用div和添加跨距是错误的，不管我是否使用数组方法。此外，使用我糟糕的方法，您必须手动将所选内容移动到文本的末尾，这样您就不会向后键入。使用live
contenteditable
是一件非常痛苦的事情，我不推荐这样做。考虑使用标准的输入，使用结果元素，或者类似的东西。我可能会像你正在做的那样添加模糊的颜色，但是把它想象成一个代码编辑器。变量以不同的颜色高亮显示。虽然我很想添加results元素，但我不能真正添加它，因为这样做没有意义。您可以尝试使用带有事件侦听器的普通div。按下键时，更改与文本对应的变量，并相应地更新div。按箭头键时，相应地增加/减少索引（当前文本光标位置）。在每次索引更改（或添加/删除新字母）时，重新计算文本光标的位置，并使其在div中的适当位置可见。