Как оформить конкретное c слово в текстовой области

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>