JSFiddle - React, Tailwind, and code Playground

HTML

<form name="myform">
    <div id="editableDiv" contenteditable="true">the quick <b><i>:lazy</i></b> fox jumps over a <b><i>:lazy<span style="color:red;"> dog </span></i></b>dog</div>
    <input type="button" id="rewrite" value="Rewrite" />
</form>

JavaScript

$(document).ready(function () {
    $("#rewrite").click(function () {
        var regex = /\.*([:]\w+(?!\w*[;]))/g
        var originalHtml = $('#editableDiv').html();
        var mi = 1;
        var newHtml = originalHtml.replace(regex, function() {
            var ret = (mi == 2)?'sleeping':arguments[0];
            mi++;
            return ret;
        });
        $('#editableDiv').html(newHtml);
    });
});