Javascript 在contenteditable=”上键入时更改特定单词的颜色；“真的”；

我正在尝试做一些有趣的事情，例如，我有一个带有contenteditable=“true”的div，并且希望在编写时更改我编写的特定单词的颜色，例如，在单词“typing”下面的示例中，正常文本颜色为白色，突出显示的颜色文本为红色

<div class="text-area" contenteditable="true">
 start typing here...
</div>

开始在这里输入。。。

---

任何想法开发人员，我想作为Vanilla Js或框架都不重要。

你可以有一个带有关键字的字典/对象，每个都有一个指定的颜色

let main=document.querySelector（'div#main'）；
让outp=document.querySelector（'div#output'）；
//要替换的颜色
const colors=[‘红色’、‘黄色’、‘蓝色’、‘绿色’、‘洋红’、‘紫色’、‘黑色’、‘白色’、‘灰色’、‘青色’、‘橙色’、‘深红色’、‘鲑鱼’、‘粉色’、‘紫罗兰’、‘绿松石’、‘耐火砖’、‘盖恩斯博罗’、‘蜜露’、‘象牙’、‘靛蓝’、‘薰衣草’、‘莱姆’、‘亚麻’、‘褐红色’；
常量关键字={
酷：2，
“黑猫”：8，
快乐：1
};
//当用户输入某个内容时，为其设置样式
main.addEventListener（“输入”，函数（e）
{
outp.innerText=this.innerText；
for（设i=0；i
div#main
{
/*位置：绝对位置；
z指数：50*/
/*显示：无*/
颜色：透明；
}
div#main:：selection
{
颜色：透明；
背景：透明；
}
主分区
{
位置：固定；
z指数：50；
}
div#输出
{
边框：1px纯灰；
}
div#main，div#output
{
大纲：无；
最小宽度：3cm；
最小高度：1cm；
最大宽度：90vw；
最大高度：90vh；
填充物：5px；
}

请输入一些很酷的东西，比如一只快乐的黑猫
您可以使用类似的方法。哇，这已经很接近了，但我的意思是如何将打字类变成红色，而不是在OK下的类，我编辑了答案。。。锄它有帮助