Javascript 当键入的文本为'；它不是静态的吗？

我想要的例子

我有两个区域。一个人拥有一个单字列表，每行一个，这个列表不会每次都相同

我的第二个文本区域将用于用户输入。我的目标是在将第一个文本区域中的单词键入第二个文本区域时突出显示该单词。我附上了一张示例照片，展示了我希望实现的目标

例如：

我的代码只是将一个单词列表推到第一个文本区域并将它们分开。我正在寻求有关如何突出显示所需单词的帮助

<textarea class="col-md-3" id="inputArray1" rows="20" cols="10" placeholder="Input1"></textarea>
<textarea class="col-md-3" id="inputArray2" rows="20" cols="10" placeholder="Input2"></textarea>

//holding input values for text area
var InputVar = document.getElementById("inputArray1").value;
var InputVar2 = document.getElementById("inputArray2").value;

//holding output values for text area
var OutputVar = document.getElementById("outputArray1");
var OutputVar2 = document.getElementById("outputArray2");

// takes string and breaks into substring array of words
var SplitString = InputVar.split(/[\s]+/g);

//displays list of words in 2nd text area
OutputVar.value = SplitString;

//保留文本区域的输入值
var InputVar=document.getElementById（“inputArray1”）.value；
var InputVar2=document.getElementById（“inputArray2”）.value；
//保留文本区域的输出值
var OutputVar=document.getElementById（“outputArray1”）；
var OutputVar2=document.getElementById（“outputArray2”）；
//获取字符串并将其拆分为单词的子字符串数组
var SplitString=InputVar.split（/[\s]+/g）；
//显示第二个文本区域中的单词列表
OutputVar.value=SplitString；

既然您标记了jQuery，下面是一个基本函数，用于检查是否有任何用户单词与列出的任何单词匹配：

$（“#userArray”）。在（'change keyup paste'，function（）上{
var输入=$（this.val（）.split（“\n”）；
$（'#listArray span'）。每个（函数（）{
$（this.removeClass（'active'）；
if（$.inArray（$（this.text（），输入）！=-1）{
$（this.addClass（'active'）；
}
});
});
#list_input>div{border:4px solid；padding:1em；margin:1em auto；}
#listArray{溢出：自动；}
#listArray span{display:block；float:left；clear:left；padding:4px；margin:1px；}
#listArray span.active{背景：黄色；}
#用户数组{宽度：100%；高度：150px；边框：无；}

洛勒姆
Eos
耳膜
颞叶
轮回科
既然您标记了jQuery，下面是一个基本函数，用于检查是否有任何用户单词与列出的任何单词匹配：


$（“#userArray”）。在（'change keyup paste'，function（）上{
var输入=$（this.val（）.split（“\n”）；
$（'#listArray span'）。每个（函数（）{
$（this.removeClass（'active'）；
if（$.inArray（$（this.text（），输入）！=-1）{
$（this.addClass（'active'）；
}
});
});
#list_input>div{border:4px solid；padding:1em；margin:1em auto；}
#listArray{溢出：自动；}
#listArray span{display:block；float:left；clear:left；padding:4px；margin:1px；}
#listArray span.active{背景：黄色；}
#用户数组{宽度：100%；高度：150px；边框：无；}

洛勒姆
Eos
耳膜
颞叶
轮回科
不能突出显示
textarea
内的文本。是否可以使用普通的
div
，将单词列表包装在
s中？必须从用户之前输入的字符串/数组中推送单词列表。只要我能把这些信息传给div就好了。主要目标是突出显示正在显示的单词。区分大小写重要吗？最好是能够突出显示小写和大写字母，不幸的是，使用正则表达式或其他东西突出显示大写单词不会减少显示。使用contenteditable div时，不能突出显示
textarea
内的文本。是否可以使用普通的
div
，将单词列表包装在
s中？必须从用户之前输入的字符串/数组中推送单词列表。只要我能把这些信息传给div就好了。主要目标是突出显示正在显示的单词。区分大小写重要吗？最好能突出显示小写和大写字母，使用正则表达式或其他东西突出显示大写单词，但不幸的是，这样做不会减少显示。使用contenteditable div正是我所需要的。有没有办法使它区分大小写。而且，当这些词被删除时，它们仍然保持突出显示，因此我必须进行某种更新以检查当前状态？@Pyreal-oh我忘记了这一点。我添加了不区分大小写和在删除单词时重置类。@Pyreal我以为你说过你需要两个不同的文本区域？或者用户输入只需要在一端吗？谢谢，当删除单词时，它似乎工作得很好。无论键入的单词是小写还是大写，仍然高亮显示。@当大小写完全一致时，是否要高亮显示？这正是我需要的。有没有办法使它区分大小写。而且，当这些词被删除时，它们仍然保持突出显示，因此我必须进行某种更新以检查当前状态？@Pyreal-oh我忘记了这一点。我添加了不区分大小写和在删除单词时重置类。@Pyreal我以为你说过你需要两个不同的文本区域？或者用户输入只需要在一端吗？谢谢，当删除单词时，它似乎工作得很好。无论键入的单词是小写还是大写，仍然高亮显示。@当大小写完全一致时，是否要高亮显示？