javascript - 浏览器内文本的交互式选择突出显示

Question

我需要的是通过 Javascript 在浏览器中以交互方式突出显示文本。

更具体地说，假设我在 div 元素中有一堆文本，如下所示:

<div>The quick brown fox jumps over the lazy dog ... </div>

现在我要做的是选择文本的特定范围并突出显示它(即“brown fox”)。我已经通过使用 rangy.js 实现了这一点。

现在我真的想让这个选择/突出显示更具交互性，以便用户可以捕获选择的开始或结束(使用某种 handle )并通过拖动开始或结束来交互式地调整选择的大小当前选择到新的起点或终点。

我试图用谷歌搜索这个但找不到任何东西。更糟糕的是，我完全不知道我应该如何开始实现这样的东西。

也许有人可以为我指明正确的方向，或者更好的是已经对如何开始实现这样的事情有了一些想法。

非常感谢您的帮助...

Answer 1

这个问题相当复杂，并且由于缺乏跨浏览器的一致性而受到阻碍。然而，我已经尝试解决了这个问题并取得了一定程度的成功。

Test out my solution with this jsfiddle

我不保证这在所有情况下都有效，到目前为止我的测试仅限于文本。还有一些问题需要解决，我会在不久的将来解决。不过，我认为它已准备好在此处发布。

方法论

问题可以分解成几个步骤。首先，我们需要在用户的选择周围插入标记。这并不太难，尽管有几个必须解决的设计决策。经过一些实验，我决定将 span 直接插入文档中的标记位置；然后可以更轻松地选择这些标记之间的内容。下面是插入标记的方法。

function insertMarker (isBefore) {
    var range;
    
    if (window.getSelection) {
        // IE9+ and non-IE
        var sel = window.getSelection();
        
        if (sel.getRangeAt) {
            range = window.getSelection().getRangeAt(0);
            range.collapse(isBefore);
        }
    } else if (document.selection && document.selection.createRange) {
        // IE < 9
        range = document.selection.createRange();
        range.collapse(isBefore);
    }
    
    // Create the marker element and insert it into the DOM.
    if (range) {
        range.insertNode(createMarker(isBefore));
    }
}

其次，用户必须能够在文档周围拖动这些标记，以便它们锁定在字符/可选内容之间。这可以使用 document.caretPositionFromPoint(x, y)(标准)或 document.caretRangeFromPoint(x, y)(WebKit)来实现。

第三，当标记被移动时，必须更新选择以反射(reflect)这种变化。这可以使用 range.setStartAfter 和 range.setEndBefore 来实现，尽管 Range 实现不同，但大多数浏览器都支持它们。

function selectSelection () {
    if (window.getSelection) {
        // IE9+ and non-IE
        var sel = window.getSelection();
        var range = document.createRange();
        range.setStartAfter($(".marker").get(0));
        range.setEndBefore($(".marker").get(1));
        sel.removeAllRanges();
        sel.addRange(range);
    }
    else if (document.selection && document.selection.createRange) {
        // IE < 9
        var range = document.selection.createRange();
        range.setStartAfter($(".marker").get(0));
        range.setEndBefore($(".marker").get(1));
    }
}