Html 在文本区域中设置单词背景色

我希望用不同的颜色突出显示文本区域中的单词和短语，如下所示：

你建议我怎么做？如果不能使用文本区域，您会推荐什么

我的应用程序将使用此文本区域使客户端能够输入一篇短篇故事。应用程序将根据单词和短语的频率为其着色。我将把文本区域中的所有单词存储在一个数组中，例如文本：

“从前，我遇到一个叫劳拉的女人。她是”

内部代表为：

“一次”、“一次”、“一次”、“我”、“遇见”、“一个”、“女人”、“被叫”、“劳拉”、“她”、“是”

。 当应用适当的颜色时，将使用此数组

---

我将通过一个单独的问题询问在文本更改时更新数组的有效方法，但在回答此问题时请记住这一点。

文本区域可能是错误的方法

我建议使用一个普通的分割或类似的元素，然后将您想要突出显示的内容包装在一个

中，每个颜色都有一个类。您可以启用

contenteditable

，以允许用户编辑元素内的文本

例如：

<div contenteditable="true">
    This is some text. I am <span class="blue">highlighting it</span>. It's <span class="yellow">pretty obvious</span> isn't it?
</div>

这是一些文本。我正在强调这一点。很明显，不是吗？

---

如果您想要textarea的外观，在CSS中只需将样式应用于textarea和此元素。

将数组中的所有文本显示到div元素中

对于要选择的每个图元，将文本包装在跨度图元内

---

根据您想要的颜色设置span元素的背景色。

不能这样做；您可能想将

与一起使用。可能是重复的。我希望看到此问题的答案。我觉得它与上面提到的“格式文本”非常不同。这个问题来自给定的示例，希望格式化文本区域内的文本（innerHtml）。我认为你不做体操是不行的。