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

Position changes every time with window.getSelection()

本文关键字：位置 改变 window getSelection      更新时间：2023-09-26

有人能帮帮我吗?这里有这些代码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/.

我想做的是……用户将突出显示一个块，然后在span中换行，但如果用户犯了一个错误，并试图再次突出显示，span将被删除，并将尝试换行新的突出显示的文本。但是位置改变或者部分文本被追加。

查看此更新:jsfiddle.

首先，按下鼠标，你可以像这样展开span: 

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

其次，使用范围的问题。startOffset和range。endOffset表示开始部分相对于包含元素，该元素可能是突出显示跨度，导致您在后续选择中替换不正确的文本。相反，用span替换选择，如下所示:

$(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范围的信息。startOffset,特别是:

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

相关文章：