Javascript 光标在contenteditable div元素中向前跳转

我有以下代码：

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

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


变量已更改，lastValue=''，div=$（'#ce'），words=['oele'，'geel'，'，
"politie","foo bar",；
函数标记词（）{
var html=div.html（）.replace（//gi'，），text=html
.replace（/]+>/g'）。replace（/\s+//g'），exp；
$.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）；//使用范围选择元素的全部内容
}
}
[内容可编辑]{
填充：10px；
边框：虚线1px#aaa；
}
[内容可编辑]>div{
利润率：10px0；
}
[内容编辑]强{
字体大小：正常；
背景：红色；
颜色：白色；
}

---

它所做的是获取特定的单词并在其上添加红色背景。但当您将光标放在中间或任何位置（但不在末尾）并键入1个字符时，光标会向前跳。有什么问题吗？

您正在这里替换contenteditable div的html

div.html（html）这会导致选择点丢失。这里有一些解决方法，但我会决定您是否真的想替换整个html块，或者是否可以少做一些。