光标在contenteditable div元素中向前跳跃

Question

我有这段代码：

    <div id="ce" contenteditable>I love me some foo bar and shit.</div>

    <p>
        <a href="javascript:void(0);" onclick="$('#ce').html('');">clear</a>
    </p>

    <script>
        var changed, lastValue = '', div = $('#ce'), words = [ 'oele', 'geel',
                'politie', 'foo bar' ];

        function markWords() {
            var html = div.html().replace(/<\/?strong>/gi, ''), text = html
                    .replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' '), exp;
            $.each(words, function(i, word) {
                exp = new RegExp('\\b(' + word + ')\\b', 'gi');
                html = html.replace(exp, function(m) {
                    console.log('WORD MATCH:', m);
                    return '<strong>' + m + '</strong>';
                });
            });
            //html = html.replace('&nbsp;', ' ').replace(/\s+/g, ' ');
            console.log('HTML:', html);
            console.log('----');
            div.html(html);
        }

        setInterval(function() {
            var html = div.html();
            if (lastValue != html && html) {
                //console.log(lastValue);
                //console.log(html);
                //console.log('----');
                lastValue = html;
                markWords();
                setEndOfContenteditable(div[0]);
            }
        }, 500);

        function setEndOfContenteditable(contentEditableElement) {
            var range, selection;
            if (document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
            {
                range = document.createRange();//Create a range (a range is a like the selection but invisible)
                range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
                range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
                selection = window.getSelection();//get the selection object (allows you to change selection)
                selection.removeAllRanges();//remove any selections already made
                selection.addRange(range);//make the range you have just created the visible selection
            } else if (document.selection)//IE 8 and lower
            {
                range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
                range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
            }
        }
    </script>

    <style>
    [contenteditable] {
        padding: 10px;
        border: dotted 1px #aaa;
    }

    [contenteditable]>div {
        margin: 10px 0;
    }

    [contenteditable] strong {
        font-weight: normal;
        background: red;
        color: white;
    }
    </style>

http://jsfiddle.net/nebgcpzz/

它的作用是获得特定的单词并在其上添加红色背景。但是当你将光标放在中间或任何地方（但结尾）并输入1个字符时，游标会向前跳跃。任何女儿？