Javascript ContentEditable div，光标位置工作不正常

在JSFIDLE中，在文本之间书写时，光标位置移动到句子的最后一个位置

var已更改，
lastValue=“”，
div=$（'ce'），
单词=['oele'，'geel'，'politie'，'foobar']；
函数标记词（）{
var html=div.html（）.replace（//gi'，），
text=html.replace（/]+>/g'）。replace（/\s+//g'），
经验；
$.each（单词、函数（i、单词）{
exp=newregexp（'\\b（'+word+'）\\b'，'gi'）；
html=html.replace（exp，function（m）{
log（'wordmatch:'，m）；
返回“”+m+””；
});
});
//html=html.replace（“”，）.replace（/\s+/g，）；
log（'HTML:'，HTML）；
console.log（'---'）；
div.html（html）；
}
setInterval（函数（）{
var html=div.html（）；
if（lastValue！=html&&html）{
//console.log（lastValue）；
//log（html）；
//console.log（'---'）；
lastValue=html；
标记词（）；
setEndOfContenteditable（div[0]）；
}
}, 500);
函数setEndOfContenteditable（contentEditableElement）{
var范围、选择；
if（document.createRange）//Firefox、Chrome、Opera、Safari、IE 9+
{
range=document.createRange（）；//创建一个范围（一个范围与所选内容类似，但不可见）
range.selectNodeContents（contentEditableElement）；//选择具有范围的元素的全部内容
range.collapse（false）；//将范围折叠到终点。false表示折叠到终点而不是起点
selection=window.getSelection（）；//获取选择对象（允许您更改选择）
selection.removeAllRanges（）；//删除所有已做的选择
selection.addRange（range）；//使刚刚创建的范围成为可见的选择
}else if（document.selection）//IE 8及更低版本
{
range=document.body.createTextRange（）；//创建一个范围（范围与所选内容类似，但不可见）
range.moveToElementText（contentEditableElement）；//使用范围选择元素的全部内容
range.collapse（false）；//将范围折叠到终点。false表示折叠到终点而不是起点
range.select（）；//选择范围（使其成为可见选择
}
}

[内容可编辑]{
填充：10px；
边框：虚线1px#aaa；
}
[内容可编辑]>div{
利润率：10px0；
}
[内容编辑]强{
字体大小：正常；
背景：红色；
颜色：白色；
}

我爱我一些食物吧和狗屎。

在像下面这样更改setInterval函数后，它对我起了作用

 setInterval(function() {
    var html = div.html();
    if ( lastValue != html && html ) {
        lastValue = html;
    }
 }, 500);

---

有人能提供解决方案吗？但是我们不能为选定的关键字应用颜色。如果我们错过了markwords（）函数