different text color in text area [duplicate]

how can i give text a color defined in JavaScript

like if apple in text area it outputs to red same as market in green

<!DOCTYPE html>
<html>
<head>

</head>
<body>


    
  <textarea class="custom-area" id="myTextArea"> apple market</textarea>

    <script type="text/javascript">

const colorMap = {"apple": "red", "market": "green"};
let textArea = document.getElementById("myTextArea");

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>`;
    });
}
    </script>
</body>
</html>