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

更具体地说,我只想说我在div元素中有一堆文本,如下所示：

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

现在我想要做的是选择这个文本的某个范围并突出显示它(即“棕色狐狸”).我已经通过使用rangy.js来完成这项工作.

现在我真的想让这个选择/突出显示更具交互性,以便用户可以抓住选择的开头或结尾(使用某种句柄)并通过将当前选择的开头或结尾拖动到交互式来调整选择的大小.新的起点或终点.

我试图谷歌这个,但找不到任何东西.更糟糕的是,我完全不知道应该如何开始实施这样的事情.

或许有人可以指出我正确的方向,甚至可以更好地了解如何开始实施这样的事情.

非常感谢任何帮助……

解决方法:

这个问题相当复杂,并且由于浏览器之间缺乏一致性而受到阻碍.但是,我已经对这个问题进行了一定程度的成功.

Test out my solution with this jsfiddle

Edit: more robust solution

我不保证这适用于所有情况,我的测试仅限于文本到目前为止.还有一些问题需要解决,我将在不久的将来解决.但是,我认为它已经准备好在这里发布了.

方法

问题可分为几个步骤.首先,我们需要在用户的选择周围插入标记.尽管有一些必须解决的设计决策,但这并不困难.经过一些实验,我决定在标记位置直接插入文档;然后,更容易在这些标记之间选择内容.下面是插入标记方法.

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