Javascript 内容可编辑div中的句柄插入符号位置

我有这个HTML格式的内容可编辑div

<div contenteditable="true" id="TextOnlyPage"></div>

这是我的jquery代码

var rxp = new RegExp("(([0-9]+\.?[0-9]+)|([0-9]+))", "gm");
$('#TextOnlyPage').keyup(function(e){
    if(e.keyCode == 13){
        e.preventDefault();
        $('#TextOnlyPage').children().each(function() {
            if ( $(this).is("div") ) {
                $(this).contents().unwrap();
            }});
        $('#TextOnlyPage').append("<br/>");
    }
        $('#TextOnlyPage').children().contents().unwrap();
        var $this = $(this);
        var content = $this.html();
        $this.html(content.replace(rxp, "<span class='highlight'>$1</span>"));});

var rxp=newregexp（（[0-9]+\.？[0-9]+）|（[0-9]+），“gm”）；
$（'#TextOnlyPage'）.keyup（函数（e）{
如果（e.keyCode==13）{
e、 预防默认值（）；
$（'#TextOnlyPage'）.children（）.each（function（））{
如果（$（此）.is（“div”））{
$（this.contents（）.unwrap（）；
}});
$（'#TextOnlyPage'）。追加（
）；
}
$（'#TextOnlyPage'）.children（）.contents（）.unwrap（）；
var$this=$（this）；
var content=$this.html（）；
$this.html（content.replace（rxp，“$1”）；}）；

问题在于插入符号的位置，因为当它在string.replace方法中的数字周围应用span标记时，光标会转到可编辑内容div的开头。当我按下回车键时，它也不能转到下一行

我知道我可以通过

范围

和

选择

对象来处理它，但找不到有用的资源来了解这些对象是如何工作的

---

请为我提供此问题的解决方案，如果该解决方案使用angularjs会更好，或者为我提供一个资源，让我可以通过工作示例了解范围和选择对象。

以下是MDN:and中的一些资源

我创造了这个

它并不适用于所有情况（例如，在回车时，使用shift+箭头选择范围…），但它应该已经给了您一些想法

以下是MDN中有关创建选择的示例：

/* Select all STRONG elements in an HTML document */

var strongs = document.getElementsByTagName("strong");
var s = window.getSelection();

if(s.rangeCount > 0) s.removeAllRanges();

for(var i = 0; i < strongs.length; i++) {
    var range = document.createRange();
    range.selectNode(strongs[i]);
    s.addRange(range);
}

/*选择HTML文档中的所有强元素*/
var strongs=document.getElementsByTagName（“strong”）；
var s=window.getSelection（）；
如果（s.rangeCount>0）s.removeAllRanges（）；
对于（变量i=0；i

---

作为旁注，使用

contentEditable

将在将来带来更多麻烦，我建议您尽最大努力找到替代方法。另外，请务必注意我提供的链接中的有限浏览器支持警告。

我遇到了与您不久前相同的问题，为了了解

范围和
选择的工作原理，我建议您查看MDN文档和

检测
contentEditable
div中更改的一种可靠方法是事件
input
。我在监听
keyUp
并阻止某些
keyCode
的默认行为时发现的一个问题是，它们有很多，很难涵盖所有用例

我更喜欢做的是让正常事件被处理，保存插入符号位置，获取文本值，替换需要高亮显示的部分，然后设置插入符号位置

下面是一个简单的例子

var contentEditable = document.querySelector('div[contenteditable]');
contentEditable.addEventListener('input', onInput);

var onInput = function(e) {

    // this function will be called after the current call-stack
    // is finished, at that time the user input will be inserted
    // in the content editable
    setTimeout(function() {

        // save the caret position

        var text = contentEditable.innerText;
        // perform all your replacement on `text`
        contentEditable.innerHTML = text;

        // set the caret position back
    }, 0);
}

我还编写了两个简便的方法
getCaretOffsetWithin
和
setCaretPositionInwithin
，以帮助您在需要执行某些DOM操作时操作插入符号，并在处理后将插入符号重新定位到其初始值

你可以在这个要点上检查它们
我想你指的是大于[
]小于[
@ethorn10按插入符号位置，OP指的是插入点在文本框中的位置。@ethorn10对不起，我没有理解你的意思..！谢谢你的代码，伙计。为我节省了很多时间。