我有一个textarea当我输入某些内容时，某些单词的颜色应该改变。
例如，如果键入的文本是下一个：He went to the market to buy an apple
- “市场”这个词应该变成green
- “苹果”这个词应该变成red
这是我当前的代码：
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>
不幸的是，您不能在 a 中添加标记textarea，但是您可以将以下想法作为起始方法，它来自于此link https://codersblock.com/blog/highlight-text-inside-a-textarea/。该方法将基于以下内容：
基本思想是仔细定位<div>在...后面<textarea>. Then JavaScript将用于复制输入到的任何文本<textarea> to the <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动态地。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
