Измените положение курсора в contenteditable div после изменения innerHTML

У меня есть простой contenteditable div с некоторым текстом в нем. В событии onkeyup я хочу заменить весь контент (innerHTML) div на основе регулярного выражения.

Например,

HTML:

some text, more text and $even more text

Функция, в которой я планирую получить весь текст с $($ даже в примере выше) и обернуть его в тег span:

div.onkeypress = function() { 
     div.innerHTML.replace(/(some_regexp)/, "<span class='class'>$1</span>"); 
};

Проблема заключается в том, что такой замещающий курсор переходит к началу div. Я хочу, чтобы он остался там, где он был раньше.

Я предполагаю, что мне нужно сохранить координаты курсора перед изменением, а затем каким-то образом использовать их для установки курсора, но как я могу это сделать?:)

Я попробовал сохранить объект диапазона, но после редактирования я считаю, что он указывает на никуда.

Спасибо!

Ответ 1

Проблема в том, что вы обновляете весь innerHTML, но только небольшая его часть меняется. Вы не можете использовать регулярное выражение и o массовую замену. Вам нужно отсканировать div и найти совпадения, создать из них диапазоны текста и обернуть контент с помощью span. См. http://www.quirksmode.org/dom/range_intro.html, программируя создание диапазона.

Однако, я думаю, что это не сработает, если курсор находится в тексте, который нужно заменить, но это начало.

Ответ 2

Вы знаете, какой текст вы заменяете. Значит, вы знаете позицию этого текста. там только вы собираетесь поместить новый текст. Тогда и позиция такая же. После написания нового html yu может установить курсор.

например,

Я не сомневаюсь в вопросе

позиция вопроса - 5 и я заменю его

Я не недооцениваю ответ

сделайте положение курсора 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

Ответ 3

Я взял это с другого форума. Он решил мою проблему.

Хорошо, мне удалось обойти это, вот решение, если кому-то интересно:

Сохраните выбор x, y:

код:

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

Восстановить выбор:

код:

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

Вы можете видеть, как он работает здесь:

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