Mark certain words while typing in a [contenteditable]

While preserving cursor location etc.

HTML

<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>

CSS

[contenteditable] {
    padding: 10px;
    border: dotted 1px #aaa;
}
[contenteditable] > div {
    margin: 10px 0;
}
[contenteditable] strong {
    font-weight: normal;
    background: red;
    color: white;
}

JavaScript

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
       ...