如何更改文本区域中文本的颜色

Question

我有一个 textarea，当我输入内容时，某些单词的颜色应该会改变。

例如，如果输入的文本是下一个：He went to the market to buy an apple

"market"字应该变成绿色
"apple"字应该变成红色

这是我当前的代码：

var str = 'market';
var value = str.includes('market');

if (value == str) {
    document.getElementById("text").style.color = "green";
} else {
    document.getElementById("text").style.color = "red";
}

<textarea rows="9" cols="100" id="text" onClick="changeText();"></textarea>

Answer 1

您可以将 textarea 中的文本作为一个整体设置样式，但由于 textarea 没有 sub-elements 例如，您不能在该 textarea 中为单独的文本提供单独的样式。另一方面，如果您有一个单独的 div 显示文本的副本，您可以在 div 的 innerHTML 中分配苹果替换 .. 中的 apple 一词，但 textarea 中的文本将保持不变 .. 可能覆盖 div 在 textarea 的顶部，但隐藏直到在 textarea 中输入文本。不确定执行该部分的精确代码或者它是否有效。但至少它是一个可行的逻辑链，我希望可以帮助您找到解决方案。

Answer 2

要为该文本中的特定单词着色，您必须用 html 标记将该单词包裹起来。但是textarea不支持html标签。

您可以在 textarea 字段之外进行。

Answer 3

不幸的是，您不能在 textarea 中添加标记，但您可以将这里的想法作为起始方法，它来自 link。该方法将基于此：

The basic idea is to carefully position a <div> behind the <textarea>. Then JavaScript will be used to copy any text entered into the <textarea> to the <div>. A bit more JavaScript will make that both elements scroll as one. With everything perfectly aligned, we can add markup inside the <div> to give colors to some particular words, and we going to set text color to transparent on the <textarea>, completing the illusion.

基本实现：

// Initialization.

const colorMap = {"apple": "red", "market": "green", "banana": "orange"};
let textArea = document.getElementById("myTextArea");
let customArea = document.querySelector(".custom-area");
let backdrop = document.querySelector(".backdrop");

// Event listeners.

textArea.addEventListener("input", function()
{
    customArea.innerHTML = applyColors(textArea.value);
});

textArea.addEventListener("scroll", function()
{
    backdrop.scrollTop = textArea.scrollTop;
});

function applyColors(text)
{
    let re = new RegExp(Object.keys(colorMap).join("|"), "gi");

    return text.replace(re, function(m)
    {
        let c = colorMap[m.toLowerCase()];
        return `<spam style="color:${c}">${m}</spam>`;
    });
}

.backdrop, #myTextArea {
  font: 12px 'Open Sans', sans-serif;
  letter-spacing: 1px;
  width: 300px;
  height: 100px;
}

#myTextArea {
  margin: 0;
  position: absolute;
  border-radius: 0;
  background-color: transparent;
  color: transparent;
  caret-color: #555555;
  z-index: 2;
  resize: none;
}

.backdrop {
  position: absolute;
  z-index: 1;
  border: 2px solid transparent;
  overflow: auto;
  pointer-events: none;
}

.custom-area {
  white-space: pre-wrap;
  word-wrap: break-word;
}

<div class="container">
  <div class="backdrop">
    <div class="custom-area">
        <!-- Cloned text with colors will go here -->
    </div>
  </div>
  <textarea id="myTextArea"></textarea>
</div>

请注意，这只是理解基本思想的基本方法。但是通过一些工作，也许你可以获得一个通用版本。例如，到目前为止，textarea 无法调整大小。但也许您可以检测到该事件并动态重新调整 backdrop。

如何更改文本区域中文本的颜色

How to change color of text in a textarea

html

javascript

textarea

基本实现：