I have a simple contenteditable div with some text in it. On onkeyup event i want to replace whole content (innerHTML) of the div based on regex.

For example,

HTML:

some text, more text and $even more text

Function in which i plan to get all text with $ ($even in example above) and wrap it in span tag:

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

The problem is after such replacement cursor jumps to the start of the div. I want it to stay where it was before.

I imagine i have to save coordinates of the cursor before change and then somehow using them set cursor back but how can i do it? :)

I tried saving range object but after editing i believe it points to nowhere.

Thanks!

I have a simple contenteditable div with some text in it. On onkeyup event i want to replace whole content (innerHTML) of the div based on regex.

For example,

HTML:

some text, more text and $even more text

Function in which i plan to get all text with $ ($even in example above) and wrap it in span tag:

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

The problem is after such replacement cursor jumps to the start of the div. I want it to stay where it was before.

I imagine i have to save coordinates of the cursor before change and then somehow using them set cursor back but how can i do it? :)

I tried saving range object but after editing i believe it points to nowhere.

Thanks!

• javascript
• html
• contenteditable
• cursor-position

• What does the replacement HTML look like? – Tim Down Commented Sep 24, 2010 at 16:59
• I've updated the original question. if you know how to get expected behavior by some other means without changing whole innerHTML - would be great to hear. – Ilya Tsuryev Commented Sep 26, 2010 at 8:37
• 1 I know it's an old question, but did you managed to find a solution for this? I'm having the exact same need – Javis Perez Commented May 11, 2017 at 15:21

3 Answers 3

I took this from another forum. It solved my problem.

Ok, I managed to work around it, here's the solution if anyone's interested:

Store the selection x, y:

Code:

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

Restore the selection:

Code:

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

You can see it working here:

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

The problem is that you're updating the whole innerHTML, but only a small part of it is changing. You can't use a regular expression and o a bulk replace. You need to scan the div and look for matches, create text ranges out of them and wrap the content with the span. See http://www.quirksmode/dom/range_intro.html , Programmatically creating a Range.

However, I think this won't work if the cursor is in the text to be replaced, it's a start though.

You know which text you are replacing. So you know the position of that text . there only you going to put the new text. Then also the position is same.After writing new html , yu can set cursor.

for eg

I dont undertsand the question

position of question is 5 an i replace it

I dont undertsand the answer

make the cursor position to 5

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

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

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