Cambie la posición del cursor en la div contenteditable después de cambiar innerHTML

Tengo una div simple contenteditable con algún texto en ella. En el evento onkeyup quiero reemplazar todo el contenido (innerHTML) del div basado en regex.

Por ejemplo,

HTML:

some text, more text and $even more text 

Función en la que planeo obtener todo el texto con $ ($ incluso en el ejemplo anterior) y envolverlo en la etiqueta span:

 div.onkeypress = function() { div.innerHTML.replace(/(some_regexp)/, "$1"); }; 

El problema es después de que tal cursor de reemplazo salta al comienzo de la div. Quiero que permanezca donde estaba antes.

Imagino que tengo que guardar las coordenadas del cursor antes de cambiar y, de alguna manera, usarlas pone el cursor hacia atrás, pero ¿cómo puedo hacerlo? 🙂

Intenté guardar el objeto rango, pero después de la edición creo que no apunta a ninguna parte.

¡Gracias!

El problema es que estás actualizando todo el HTML interno, pero solo una pequeña parte está cambiando. No puede usar una expresión regular y un reemplazo masivo. Necesita escanear el div y buscar coincidencias, crear intervalos de texto y ajustar el contenido con el lapso. Consulte http://www.quirksmode.org/dom/range_intro.html , Creación de un rango programáticamente.

Sin embargo, creo que esto no funcionará si el cursor está en el texto que se va a reemplazar, aunque es un comienzo.

Usted sabe qué texto está reemplazando. Entonces sabes la posición de ese texto. allí solo vas a poner el nuevo texto. Luego, también la posición es la misma. Después de escribir un nuevo html, puede establecer el cursor.

por ejemplo

No entiendo la pregunta

posición de la pregunta es 5 y lo reemplazo

No entiendo la respuesta

poner la posición del cursor a 5

http://ajaxian.com/archives/javascript-tip-cross-browser-cursor-positioning

http://hartshorne.ca/2006/01/23/javascript_cursor_position/

http://geekswithblogs.net/svanvliet/archive/2005/03/24/textarea-cursor-position-with-javascript.aspx

Tomé esto de otro foro. Solucionó mi problema.

Ok, me las arreglé para solucionarlo, esta es la solución si alguien está interesado:

Almacene la selección x, y:

Código:

 cursorPos=document.selection.createRange().duplicate(); clickx = cursorPos.getBoundingClientRect().left; clicky = cursorPos.getBoundingClientRect().top; 

Restaure la selección:

Código:

 cursorPos = document.body.createTextRange(); cursorPos.moveToPoint(clickx, clicky); cursorPos.select(); 

Puedes verlo trabajando aquí:

http://www.tachyon-labs.com/sharpspell/