Estoy tratando de hacer un código con un div editable, por lo que si escribe algunas palabras específicas, cambian de color. Conseguí que esto funcionara gracias a un desbordamiento de pila (¿Qué más?) pero cada vez que actualizo el HTML interno del elemento con el que estoy trabajando, mueve mi cursor (La cosa parpadeante con la que escribe) al comienzo del texto. ¿Hay alguna manera de preservar mi posición de intercalación en este div?
const words = [ "apple", "banana", "pear" ] document.getElementById("colordiv").addEventListener("keypress", colorchange) function colorchange() { var cont = document.getElementById("colordiv").innerHTML.split(" "); for (i = 0; i < cont.length; i++) { if (words.includes(cont[i])) { cont[i] = "<span style='color:blue'>" + cont[i]; cont[i] = cont[i] + "</span>"; } document.getElementById("colordiv").innerHTML = cont.join(" "); } } <div id="colordiv" contenteditable="true"> This text can be edited by the user. </div>