JSFiddle - React, Tailwind, and code Playground

by Adam Poczatek

HTML

<span id="edytor" contenteditable="true" spellcheck="false"></span>

CSS

#edytor { margin: 20px; padding: 10px; font-family: Consolas, "Courier New", serif; display: block;
          border: 1px sold #ccc; outline: none;
          -moz-box-shadow: 0 0 4px #666; -webkit-box-shadow: 0 0 4px #666; box-shadow: 0 0 4px #666; }

.red { color: red; }

JavaScript

$("#edytor").on("click, focus, blur, mousedown", function() {

    var $t = $(this),
        tekst = $(this).text(),
        kometarz = tekst.match(/\/\/.*/);
    
    $t.find("div:contains('" + kometarz + "')").text().replace(kometarz, "<span class=\"red\">" + kometarz + "</span>");
    
    console.log(tekst);
    console.log(kometarz);
});