Restaurar la posición del cursor después de cambiar contenteditable

Hay html como este:

<div contenteditable="true" class="value research-form thumbnail">
 Some text here
 </div>

Y el contenido de div debería resaltar dinámicamente algunas palabras, mientras que los tipos de usuario, por ejemplo, hacen algo como:

 <div contenteditable="true" class="value research-form thumbnail">
 Some text here <span style="background-color: yellow">highlight</div> it
 </div>
 <script>
    $(document).ready(function () {
        var input = $('#textarea').on('input', function (event) {
            var newText = input.text().replace('highlight', '<span style="background-color: yellow">highlight</div>');
            input.html($.parseHTML(newText));
        });
    });
</script>

Pero hay un problema: cuando actualizo el texto en div, el cursor se mueve al comienzo del texto en la entrada.

¿Hay alguna forma de restaurar la posición del cursor después de cambiar el valor contento? ¿O tal vez hay otra forma de obtener el mismo efecto?

Respuestas a la pregunta(1)

Su respuesta a la pregunta