使用Javascript突出显示同一页面上多个文本区域中的特定单词

我想突出显示用10写的特定单词（例如绿色和蓝色）。我发现了一个Javascript代码，它突出显示了a、p、button etx中页面上任何地方写的单词。但该代码并没有突出显示在textarea中编写的单词。我找到的代码是-

'<p>Hello world lorem ipsum dolor sit amet, consectetur adipisicing 
elit. Est vel accusantium 
totam, ipsum delectus et dignissimos mollitia!</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, corporis.
<small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem voluptas 
perferendis dolores ducimus velit error voluptatem, qui rerum modi? this is amet in the 
wall</small>
</p>

<textarea>hello amet this</textarea>

<style>
.highlight {
 background: lightpink;
 }
 </style>

 <script>
 function highlight(elem, keywords, caseSensitive = false, cls = 'highlight') {
 const flags = caseSensitive ? 'gi' : 'g';
 keywords.sort((a, b) => b.length - a.length);
 Array.from(elem.childNodes).forEach(child => {
 const keywordRegex = RegExp(keywords.join('|'), flags);
 if (child.nodeType !== 3) {
  highlight(child, keywords, caseSensitive, cls);
 } else if (keywordRegex.test(child.textContent)) {
  const frag = document.createDocumentFragment();
  let lastIdx = 0;
  child.textContent.replace(keywordRegex, (match, idx) => {
    const part = document.createTextNode(child.textContent.slice(lastIdx, idx));
    const highlighted = document.createElement('span');
    highlighted.textContent = match;
    highlighted.classList.add(cls);
    frag.appendChild(part);
    frag.appendChild(highlighted);
    lastIdx = idx + match.length;
  });
  const end = document.createTextNode(child.textContent.slice(lastIdx));
  frag.appendChild(end);
  child.parentNode.replaceChild(frag, child);
   }
  });
  }

  highlight(document.body, ['lorem', 'amet', 'autem']);
  </script>

”你好，世界各地的人都知道，我的名字叫洛雷姆·伊普苏姆·多洛·希特·阿梅特，我的名字叫“再见”
精英。Est-vel accusantium
托塔姆，我的爱人


Lorem ipsum dolor sit amet，奉献精英。努姆夸姆，科波里斯。
Lorem ipsum dolor sit amet，奉献精英。乌特沃卢帕斯Accusantium autem voluptas
你的错误是什么？我是艾美
墙

你好，我是艾米特
.亮点{
背景：浅粉红色；
}
函数高亮显示（元素，关键字，区分大小写=false，cls='highlight'）{
const flags=区分大小写？'gi'：'g'；
关键词.sort（（a，b）=>b.length-a.length）；
from（elem.childNodes）.forEach（child=>{
const keywordRegex=RegExp（keywords.join（“|”）、标志）；
if（child.nodeType！==3）{
突出显示（子项、关键字、区分大小写、cls）；
}else if（关键字regex.test（child.textContent））{
const frag=document.createDocumentFragment（）；
设lastIdx=0；
child.textContent.replace（关键字regex，（匹配，idx）=>{
const part=document.createTextNode（child.textContent.slice（lastIdx，idx））；
高亮显示的常量=document.createElement（'span'）；
highlighted.textContent=匹配；
突出显示的.classList.add（cls）；
附件（部分）；
附件子帧（突出显示）；
lastIdx=idx+match.length；
});
const end=document.createTextNode（child.textContent.slice（lastIdx））；
附件（完）；
child.parentNode.replaceChild（frag，child）；
}
});
}
突出显示（document.body，['lorem'，'amet'，'autem']；

---

“

您不能在

textarea

中使用标记

span

，您可以在div上使用

contenteditable=“true”

，而不是

textarea

---

这篇文章可能很有用。

您不能在

中插入标签
但是，如果您将一个

、一个

或一个带有

contenteditable=“true”

属性的

，它看起来就像一个

<那就行了

下面是一个例子：

div{
宽度：100%；
高度：500px；
}

---

在这里写一些文字

如果你认为这是一个文本区域，那么你完全错了所以，不要在document.body上运行突出显示函数，而是在textarea上运行它。我不知道，请告诉我应该写哪一行代码。我对Javascript非常陌生。因为当我写textarea来代替document.body时，它不会突出显示textarea。实际上，看看你的函数代码，它不会起作用，因为它添加了HTML元素。这在textaeea中不起作用。你不能在textarea中突出显示单词。如果你能为我做一些功能，我想用它做一些教育用途。最后，我在stackoverflow中看到两只眼睛