1

在我强调了一个电子邮件地址后，我<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()andsetCaretPos()函数

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标签中，而不是每次都对所有电子邮件地址都这样做，请告诉我！

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

4

0 回答 0