JSFiddle - React, Tailwind, and code Playground

by Deepak Kumar

HTML

Click on 'New Text' if the focus is not there and place the cursor at the end of the text. Then click on the replace link
<div id="test" contenteditable=true>
    <p> <font color="blue">Text to be replaced</font> 
    </p>
</div>
<a id="replace" href="javascript:void(null);">replace</a>
<br />
After clicking replace you ll notice that focus remains on the contenteditable div but cursor moves to the begining of the text.

<br />

Cursor should come at the end of the replacing html i.e. after the span tag

CSS

#test{
    padding:2px;
    border:1px solid yellow;
}

JavaScript

$('#test').focus();
$('#replace').on({
    mousedown: function (event) {
        event.preventDefault();
    },
    click: function () {
        $('#test').find('font').replaceWith(function () {
            return '<span style="color:red">' + 'New Text' + '</span>'
        });
    }
});