JSFiddle - React, Tailwind, and code Playground

by nickjackson

HTML

<p>Please type in James Bond<p>
<iframe id="editable" />

CSS

body {
    font-family: sans-serif;
    font-size: 11pt;
    margin:5px;

}
#editable
{
    margin:10px;
    width:400px;
}

JavaScript

$(function() {
    var iframe = $("#editable");
    var iframeObject = $(iframe).contents().get(0);
    iframeObject.designMode = "on";
    var iframeWin = iframe.contentWindow || iframeObject.defaultView;

    $(iframeObject).bind('keyup', function(evt) {
        var text;
        var t;
        text = iframeWin.document.body.innerHTML;
        t = text.replace("James Bond",function(a, b){
            return "<div style='color:blue' >" + a + "</div>"
        });
        $(iframeWin.document.body).html(t)
        
    });

});