如何更改textarea中文本的颜色

Question

我有一个textarea ，当我输入一些东西时，对于某些单词，颜色应该改变。

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

1. “市场”这个词应该变成绿色
2. “苹果”这个词应该变成红色

这是我目前的代码：

 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>后面<textarea>一个<div> <textarea> 。 然后， JavaScript将用于将输入<textarea>任何文本复制到<div> 。 多一点JavaScript会使两个元素都滚动为一个。 在所有内容完美对齐的情况下，我们可以在<div>添加标记以为某些特定单词提供颜色，并且我们将在<textarea>上将文本颜色设置为透明，从而完成幻觉。

基础实施：

 // 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重新调整backdrop 。

Answer 2

您可以将textarea中的文本设置为整体样式，但由于textarea没有子元素，或者您无法在该textarea单独样式中提供单独的文本。 另一方面，如果你有一个单独的div显示文本的副本，你可以在div的innerHTML中分配苹果替换苹果中的单词..但textarea中的文本将保持不变..可能叠加div textarea的顶部，但隐藏，直到在textarea中输入文本。 不确定要做这件事的准确代码，还是它可行。 但至少它是一个可行的逻辑链，我希望可以帮助你找到解决方案。

Answer 3

要从该文本中为特定单词着色，您必须使用html标记包装该单词。 但textarea不支持html标签。

您可以在textarea字段之外执行此操作。