Question

在我的<div contentEditable="true">中强调了一个电子邮件地址后，我无法将Carot设置为它所在的位置或应该位于何处。

似乎跳转到Node的firstChild的开头，而不是跳出右边的<strong>标签。

$('[contenteditable]').on("input", function() {
    $this = $(this);

    var re = /([a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b)/gi;
    //'

    var result = $this.html().match(re) || [];

    if (!result.compare(_emailArray) || result.length > _emailCount || result.length < _emailCount) {       
        var range = getCaretPos();
        $this.html(function() {
            var content = $this.html();
            content = content.replace(/(<(\/*strong)>)/ig,"");
            content = content.replace(re, "<strong>$1</strong>");
            return content;
        });
        setCaretPos(range);

        _emailCount = result.length;
        _emailArray = result;
    }
});

问题出在getCaretPos()和setCaretPos()函数

中

function getCaretPos(){ 
    var sel = window.getSelection();    
    var range = sel.getRangeAt(0);
    return range;
}
function setCaretPos(range){
    range = document.createRange();
    range.setStart(range.startContainer,range.startOffset);
    range.setEnd(range.endContainer,range.endOffset);
    var sel = window.getSelection();
    sel.addRange(range);
}

说实话，我并没有完全了解范围的概念。这就是我应该在这里使用的，对吧？这两个函数是从我发现的几个片段拼凑而成的。

有人可以解释范围甚至修复代码吗？顺便说一句，如果有人想要在strong标签中包装电子邮件地址，而不是每次都为所有电子邮件地址执行此操作，请告诉我们！

我感谢任何建议，片段和想法。谢谢！

在输入中的contentEditable div中突出显示匹配的正则表达式。将插入符号保留在它所属的位置

0 个答案: