JSFiddle - React, Tailwind, and code Playground

by Shibasish Bhuyan

HTML

<textarea id="fool_txt"></textarea>
<div id="fool"></div>

JavaScript

var style = [];
var words = ['function', 'var', 'editableText'];
style['function'] = 'color:#772AC3;';
style['var'] = 'color:red;';
style['editableText'] = 'color:#2A00FF;';

//function for coloring words
function ColorDiv(words, color, arr, id) {
console.log(arr)
    for (var i = 0; i < arr.length; i++) {
        arr[i] = arr[i].replace(/[\n\r]/g,"<br/>");
       
    }
    $("#" + id).html(arr.join(" "));
}

//start up functions definations
$(window).load(function () {
    ColorDiv(words, color, 'fool');

});

$("#fool_txt")
    .keyup(function () {
    ColorDiv(words, style, $(this).val().split(new RegExp("\\b")), 'fool');
})