contenteditable: save and restore caret position

Question

The function below causes the caret to move back to the beginning. How would I make it stay at the same spot after the function is called?

function highlightText() {
            var mystring = document.getElementById("writeArea").textContent;
            mystring = mystring.replace(/function/g , "<span class=\"func\">function</span>");
            document.getElementById("writeArea").innerHTML = mystring;
        }

Contenteditable declaration:

<div class="codeArea" id="writeArea" contenteditable="true"> <p> edit me! </p> </div>

Answer 1

Use selectionStart to get and set the position of the caret:

document.getElementById("writeArea").onkeyup = highlightText(this);
function highlightText(o) {
  var mystring = document.getElementById("writeArea").textContent,
  caretPosition = o.selectionStart;
  mystring = mystring.replace(/function/g , "<span class=\"func\">function</span>");
  document.getElementById("writeArea").innerHTML = mystring;
  document.getElementById("writeArea").selectionStart = caretPosition;
}

<div class="codeArea" id="writeArea" contenteditable="true"> <p> edit me! </p> </div>