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/。

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

Answer 1

查看此更新： jsfiddle 。

首先，在mousedown上，您可以解开跨度：

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

其次，使用range.startOffset和range.endOffset的问题在于，start是相对于包含元素的，它可能是突出显示跨度，导致您在后续选择中替换不正确的文本。而是用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 Range.startOffset的信息，具体为：

startContainer是Text，Comment或CDATASection类型的Node，然后offset是从startContainer的开头到Range的边界点的字符数。对于其他Node类型，startOffset是startContainer的开头和Range的边界点之间的子节点数。

另外，this answer。

每次使用window.getSelection（）更改位置

1 个答案: