在 textarea 中设置文字背景颜色答案

【问题标题】：Set word background color in textarea在 textarea 中设置文字背景颜色
【发布时间】：2013-08-06 09:21:37
【问题描述】：

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

你会如何建议我这样做？如果不能使用 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"。然后在应用适当的颜色时使用这个数组。

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

【问题讨论】：

<textarea> 不能这样做；您可能希望将<div> 与contenteditable 一起使用。
Format text in a <textarea>?的可能重复
我很想看到这个问题的答案。我觉得它与上面提到的“在中设置文本格式”非常不同。给出的示例中的这个问题想要在文本区域（innerHtml）内格式化文本。我不认为你可以不做一些体操。

标签： html textarea

【解决方案1】：

文本区域可能是错误的做法。

我建议使用普通的除法或类似元素，然后将您想要突出显示的内容包装在 <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 中将您的样式应用到 textarea 和此元素即可。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：