JSFiddle - React, Tailwind, and code Playground

HTML

<body>

Formating: <span class="blue">text</span> <span class="red">$price</span> 
<span class="green">text</span>

<div id="entry" contenteditable="true"></div>

<div id="display"></div>

</body>

CSS

body {
    padding:20px;    
}

div {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    margin-top: 5px;
    padding:5px;
}

.red {
    color:red;
}

.blue {
    color: blue;
}

.green {
    color: green;
}

JavaScript

$(document).ready(function() {

    $("#entry").keyup(function() {
        var text = $("#entry").html();

        text = text.replace(/^([^$]*)(\$[0-9]+)*(.*)$/g, "<span class=\"blue\">$1</span><span class=\"red\">$2</span><span class=\"green\">$3</span>");

        $("#display").html(text);
    });

});