Javascript 如何控制“的位置”；插入符号导航/文本插入光标“；在可编辑div中的文本中？

我有一个简单的

replace

函数，它获取输入的值，并在文本中用

span

替换相同的值。我用它来突出显示查找结果，它工作正常，但文本是一个可编辑的

div

，如果键入，也必须执行replace函数

问题是当执行该函数时，

插入符号导航/文本插入光标

返回到文本的开头

是否有某种方式可以控制此插入符号执行

替换功能

，而不改变其在文本中的位置

var txt=document.querySelector（“#text”）；
txt.addEventListener（“输入”，替换）；
var输入=document.querySelector（“输入”）；
input.addEventListener（“输入”，替换）；
函数替换（）{
设re=newregexp（input.value，'gi'）；
让replace=txt.textContent.replace（re，函数（e）{
设r=”“+e+”；
返回r；
});
txt.innerHTML=替换；
}

。突出显示{
背景#00ff90；
}
#输入{填充：5px；
}
#正文{
边框：1px实心#ccc；填充：5px；
边缘顶部：5px；
宽度：300px；
}

正则表达式工作正常

但是，当您尝试在文本框中键入时，调用了函数replace，输入文本移到开头，必须调用函数，但文本光标应保持静止
Lorem ipsum dolor sit amet，是一位杰出的献身者。维瓦摩斯·马蒂斯·阿库·乌尔纳，在瓦里帕特
尤斯托·尤里塞斯·埃吉特。这是康格的权杖。维瓦摩斯

Lorem ipsum dolor sit amet，是一位杰出的献身者。维瓦摩斯·马蒂斯·阿库·乌尔纳，在瓦里帕特
尤斯托·尤里塞斯·埃吉特。这是康格的权杖。维瓦摩斯
.亮点{
背景#00ff90；
}
#输入{填充：5px；
}
#正文{
边框：1px实心#ccc；填充：5px；
边缘顶部：5px；
宽度：300px；
}
var txt=document.querySelector（“文本”）；
txt.addEventListener（“输入”，替换）；
var输入=document.querySelector（“输入”）；
input.addEventListener（“输入”，替换）；
var currentInputPos=input.selectionEnd；
函数替换（）{
设re=newregexp（input.value，'gi'）；
如果（input.selectionStart！=currentInputPos）{
currentInputPos=input.selectionStart；
让replace=txt.textContent.replace（re，函数（e）{
设r=”“+e+”；
返回r；
});
txt.innerHTML=替换；
}
}

---

我正在使用这种结构，链接的所有内容看起来都很好，但这不是我想要的，这个链接只是展示了如何关注div，我需要的是在调用函数replace以获取答案时，输入文本不要移到文本的开头，但这不起作用，您所做的更改会影响“输入”虽然div文本不再执行replace函数，但问题是文本位于可编辑div中，在您键入时必须执行replace函数，它工作正常，但当函数被调用时，输入文本移动到起始处。我已更新代码，所有内容看起来都很好，请尝试代码一次，如果你再次遇到任何问题，请告诉我，伙计，但我认为你没有遇到问题，在你的代码中，输入文本是固定的，但替换突出显示也停止工作，我正在使用替换函数添加一个范围，突出显示在文本框中键入的找到的单词，该函数也起作用，这里有一个地方，在这个网站上有这个行为，一个测试正则表达式，当文本框中的一个类型，突出显示它的函数被执行时，再次运行我的代码并尝试在文本框中键入，你会看到函数replace是在键入后执行的，我想保留这个行为

     <input id="input" placeholder="regex" type="text" />
        <div id="text" contenteditable="true">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis arcu urna, at volutpat
            justo ultrices eget. Ut facilisis congue scelerisque. Vivamus 
        </div>
      <style type="text/css">
         .highlight {
                background: #00ff90;
            }
            #input { padding:5px;
            }
           #text{
               border:1px solid #ccc; padding:5px;
               margin-top:5px;
               width:300px;
           }
      </style>
      <script type="text/javascript">
            var txt = document.querySelector("#text");
                txt.addEventListener("input", replace);

            var input = document.querySelector("#input");
                input.addEventListener("input", replace);
            var currentInputPos = input.selectionEnd;

            function replace() {
                let re = new RegExp(input.value, 'gi');
                if(input.selectionStart != currentInputPos) {
                    currentInputPos = input.selectionStart;
                    let replace = txt.textContent.replace(re, function (e) {
                        let r = "<span class='highlight'>" + e + "</span>";
                        return r;
                    });

                    txt.innerHTML = replace;
                }
            }
      </script>