JSFiddle - React, Tailwind, and code Playground

by Angelo Rogério Rubin

HTML

<p>Digite quero e brasil na caixa abaixo.</p>
<div id="text" contenteditable="true"></div>
<p id="result"></p>

CSS

#text {
    border: 1px dashed #CCC;
    min-height: 30px;
}
.color-one {
    background-color: gray;
    color: white;
}
.color-two {
    background-color: salmon;
    color: white;
}

JavaScript

document.getElementById('text').addEventListener('keyup', function(){
    var str = this.innerHTML;
    var mapObj = {
       quero:"<span class='color-one'>quero</span>",
       brasil:"<span class='color-two'>brasil</span>"
    };
    var re = new RegExp(Object.keys(mapObj).join("|"),"gi");
    str = str.replace(re, function(matched){
      return mapObj[matched.toLowerCase()];
    });
    document.getElementById('result').innerHTML = str;
}, false);