在textarea设置词背景颜色

Question

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

你会怎么建议我这样做？如果用textarea不可能，你会推荐什么呢？

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

"Once upon a time, I met a woman called Nora. She was "

将在内部表示为：

"once", "upon", "a", "time", "i", "met", "a", "woman", "called", "nora", "she", "was"。 然后在应用适当的颜色时使用此数组。

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

Answer 1

textarea可能是错误的做法。

我建议使用普通的分区或类似的元素，然后在<span>中用每种颜色的类包装你想要突出显示的内容。您可以启用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中只需将你的风格应用于textareas和这个元素。

Answer 2

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

对于您希望选择的每个元素，将文本包装在span元素中。

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