如何在文本区域中设置特定单词的样式

Question

我的代码中有这样的东西(我不能在StackOverFlow中放太多代码(：

<textarea id="text" style="width:500px;height:500px;">
Have I Cherry
Have I Banana
Have I Apple
Have I Banana
Have I Strawberry
</textarea>

在我的脚本上，我已经修复了订单，所以它变成了这个。

<textarea id="result" style="width:500px;height:500px;">
I Have Cherry
I Have Banana
I Have Apple
I Have Banana
I Have Strawberry
</textarea>

我想要的是，如果单词是香蕉，样式=黄色，否则样式=红色。这就是我尝试过的

lines = text.value.split('n');
result.value = '';
for(var i = 0;i < lines.length;i++){
var line = lines[i];
var word = line.split(' ');
var check = line.match(/Banana/);
if(check) {
result.value += word[1] + ' ' + word[0] + ' ' + word[2].style.color = "yellow";

结果应该是每个香蕉单词都是黄色的，另一个是红色的。请记住，不是整个句子都应该是黄色的，只有"香蕉"。仍然是Javascript的新手，谁能告诉我是否有我可以做到这一点？

Answer 1

Textarea 不是做你想做的事的最佳方式，尝试使用具有可编辑内容的div，你会更好地控制样式

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

这样您就可以将所有香蕉包裹在<span style="color: yellow;"></span>