每次使用 window.getSelection() 都会改变位置

Question

谁能帮帮我？我在这里得到了这些代码https://stackoverflow.com/a/17836828/2338164

$(document).on("mouseup",".wrap",function(){
    var highlight = window.getSelection();
    if(highlight.toString().length>=1){
        var spn = '<span class="highlight">' + highlight + '</span>';
        var text = $(this).text();
        var range = highlight.getRangeAt(0);
        var startText = text.substring(0, range.startOffset);
        var endText = text.substring(range.endOffset, text.length);
        $('#q3txt').append(range.startOffset+"<br>");
        $(this).html(startText + spn + endText);
    }
});

我尝试使用它，它工作正常，直到你再次突出显示......

这是一个链接http://jsfiddle.net/AN76g/。

我想要做的是......用户将突出显示一个块然后将其包装在跨度中，但如果用户犯了错误并尝试再次突出显示，跨度将被删除并尝试包装新突出显示的文本。但要么位置发生变化，要么部分文本被附加。

Answer 1

查看此更新：jsfiddle。

首先，在鼠标按下时，您可以这样展开跨度：

$(document).on("mousedown",".wrap",function(){      
    $('.highlight').contents().unwrap();
});

其次，使用 range.startOffset 和 range.endOffset 的问题是您的开始是相对于包含元素的，这可能是高亮范围，这会导致您在后续选择中替换不正确的文本。相反，用跨度替换选择：

$(document).on("mouseup",".wrap",function(){
    var highlight = window.getSelection();      
    if(highlight.toString().length>=1){         
        var range = highlight.getRangeAt(0);
        var selectionContents = range.extractContents();
        var spn = document.createElement("span");
        spn.className='highlight';
        spn.appendChild(selectionContents);         
        range.insertNode(spn);
        highlight.removeAllRanges();
    }
}); 

来自MDN Range.startOffset的信息，具体来说：

startContainer 是 Text、Comment 或 CDATASection 类型的 Node，那么偏移量是从 startContainer 开始到 Range 边界点的字符数。对于其他Node类型，startOffset是startContainer的起点和Range边界点之间的子节点数。

另外，this answer。