Javascript 突出显示与给定字符串不匹配的单词

我想做的是：当用户输入完一些文本后，我想用另一个字符串来测试这个文本。如果它们不匹配，我希望测试失败的符号高亮显示/涂成红色。到目前为止，我只能想出以下代码

let string=“敏捷的棕色狐狸跳过懒惰的狗”；
让输入=document.querySelector（“.jstextarea”）；
let receivedValue=“”；
设checkValue=function（）{
设regex=newregexp（字符串，“g”）；
receivedValue=input.value；
如果（！正则表达式测试（接收值））{
input.classList.add（“错误”）；
};
}
输入。addEventListener（“更改”，校验值）
。错误{
边框：1px纯红；
}
我只是在整个div中使用了红色样式，然后用黑色样式将匹配的文本以span换行。还添加了^$以强制匹配测试的整个字符串，因此必须匹配整个字符串才能忽略它。

您还可以使用“（.*？”（“+string+”）（.*？”）并用错误范围包装第一个和第三个捕获组

我不确定这是否是你想要的，但大致猜测一下你想要做什么：


let string=“敏捷的棕色狐狸跳过懒惰的狗”；
让输入=document.querySelector（“.jstextarea”）；
let receivedValue=“”；
设checkValue=function（）{
设regex1=newregexp（字符串，“g”）；
设regex=newregexp（“^”+string+“$”，“g”）；
receivedValue=input.value；
如果（！正则表达式测试（接收值））{
document.getElementById（'errorbox'）。innerHTML=receivedValue.replace（regex1，$&'）；
//input.classList.add（“错误”）；
}
}
输入。addEventListener（“更改”，校验值）；
checkValue（）
。错误{
边框：1px纯红；
}
.火柴{
颜色：黑色
}

敏捷的棕色狐狸跳过了懒狗。杰克
元素
textarea
不提供将样式应用于单个单词的方法，因此最简单的方法是在输入元素下方添加错误消息

然而，这是一条艰难的道路

您可以使用带有
contenteditable
属性的HTML元素。这允许用户编辑HTML元素的内容。如果给它一个边框和一个白色背景，它看起来就像一个
textarea
元素

在本例中，我选择用绿色突出显示与字符串匹配的文本，其他所有内容用红色突出显示


let string=“敏捷的棕色狐狸跳过懒惰的狗”；
让输入=document.querySelector（“div”）；
input.addEventListener（“焦点”，（）=>{
//删除样式，以免分散用户的注意力。
for（设i=0；i{
//我们将重新创建样式标签。这是在假设
//元素将不会有很多文本。
让value=input.textContent；
输入。textContent=“”；
设失效点=-1；
对于（变量i=0；i
。可编辑{
边框：1px实心#ccc；
宽度：300px；
高度：100px；
溢出：自动；
背景：白色；
颜色：#020202；
填充：2px；
单词break：打破一切；
字体系列：无衬线；
}
.成功{
颜色：绿色；
}
.错误{
颜色：红色；
}