Change Text Color if match found automatically JavaScript|HTML

Question

i have a textarea where i want to change color automatically

for example : this is my pen my friend

as soon as i enter the above text the keyword=pen should become green color and keyword=freind should become red as soon it matches

How do i achieve this thing

code is working but half working

function changeText() 
{
        document.getElementById("text").style.color ="green";
}
</script>

Another Code i have But not Working

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

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

Answer 1

No, you can't do this in a textarea or text input. Any CSS text-related property will affect the whole text within the the textarea/input, not just a word.

see for more info: Multicolor Text Highlighting in a Textarea or Text Input