浏览器中文本的交互式选择突出显示

Question

我需要的是通过Javascript在浏览器中对文本进行交互式选择突出显示。

更具体地说，可以说我在一个div元素中有一堆文本，如下所示：

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

现在，我要做的是选择此文本的特定范围并突出显示它（即“棕狐”）。我已经通过使用获得了工作rangy.js。

现在，我真的想使此选择/突出显示更具交互性，以便用户可以抓住选择的开始或结束（带有某种手柄），并通过将当前选择的开始或结束拖动到屏幕上来交互式地调整选择的大小。新的起点或终点。

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

也许有人可以为我指明正确的方向，甚至更好的是已经对如何开始实施这样的想法有所了解。

非常感谢您的帮助...

Answer 1

这个问题相当复杂，并且由于浏览器之间缺乏一致性而受到阻碍。但是，我已经成功地解决了这个问题。

使用此jsfiddle测试我的解决方案

编辑：更强大的解决方案

我不保证在所有情况下都可以使用，到目前为止，我的测试仅限于文本。还有一些问题需要解决，我将在不久的将来解决。但是，我认为可以在这里发布了。

方法

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

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）来实现。

第三，移动标记时，必须更新选择内容以反映此更改。尽管可以使用Range实现，但大多数浏览器都支持使用range.setStartAfter和来实现这一点range.setEndBefore。

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));
    }
}