Keep caret position in contenteditable after editing the content via jscript

Question

I've got a contenteditable div which's content is being edited via javascript after each textchange(textchange.js) like adding html tags(only span-tags for changing the color of some words) and adding or removing some whitespaces here and there, but my problem is since the content is being changed while the user is editing it, the caret changes its position after every keypress, which makes it nearly impossible to write a single word. I'm at the moment searching for a way to prevent this jumping around, I've already thought of adding a special char which wouldn't be used anyway as a kind of marker at the position of the caret before editing it, removing it when finished and putting the caret back to this position, but since I'm using regex a lot(currently about 25 times after each textchange) this special character would ruin nearly every single one of them and I would have to add something like \x40? every where, which would not look nice and clear at all:

/\s<span class="b0">hello\sworld</span>/g

to:

/\s\x40?<span class="b0">\x40?h\x40?e\x40?l\x40?l\x40?o\x40?\s\x40?w\x40?o\x40?r\x40?l\x40?d\x40?</span>/g

I don't know if it helps but here is an example on how the content is changed(after each keypress):

foo +++   <span class="c3">bar</span> - baz -<span class="c0">qux</span>

to:

<span class="c1">foo</span> + <span class="c3">bar</span> - <span class="c1">baz</span> * <span class="c0">qux</span>

I'd be grateful for every advice, tip or hint on how to solve this problem, or a better way to do this marker-thing.

Thank you :)

Answer 1

Probably this is not the best solution, but I created 2 divs, one to display the text and other to edit it, the second one above the first one and with some level of transparency.

Like this:

<div style="position: absolute; left: 48px; top: 16px;" unselectable="on" onselectstart="return false">
    <code id="code_show">Type here.</code>
</div>
<div style="position: absolute; left: 48px; top: 16px;">
    <span style="opacity:0.33"><code id="code_area" contenteditable="true" onkeyup="colorize();">Type here.</code></span>
</div>

The onselectstart="return false" and the unselectable="on" ensure that the first one is not selectable. The onkeyup="colorize();" ensures that the javascript function colorize is called everytime that the user presses a key to edit the text.

So you have to define it to update the contents of code_show to match the ones in code_area but with colors.

For instance, this code paints every word RED in red color:

<script>
function colorize(){
    var code_area= document.getElementById('code_area');
    var code_show= document.getElementById('code_show');

    var inner= code_area.innerHTML;
    inner= inner.replace(/RED/g,"<span style=\"color: red\">RED</span>");
    code_show.innerHTML= inner;
}
</script>