Javascript 困境：创建荧光笔工具……快完成了

Question

我正在开发一个小 JS 插件，我希望它的功能与真正的荧光笔完全一样。取一个标准的 html 文本 div（带有子元素），用鼠标选择文本，并在鼠标松开时保持突出显示不变。看起来相当简单，对吧？

这是我到目前为止所拥有的：http://efflux.us/text/views/select.php （右侧的窗口仅输出您的选择以用于测试目的）

因此，如果您选择几个文本单词，一切都会正常。尝试选择几组单词，您会注意到 css 背景发生了变化。但是，我有两个明显的问题......

1）选择多行文本不起作用。选择多行时， getSelection() 函数不会获取<br />匹配主容器内的字符串所需的标签<div class='text>。这些<br />标签对于我正在构建的应用程序至关重要，因此绝对需要它们。删除它们时，可以选择多行。

2) 当选择一个常用单词或短语时，它的每个实例都会突出显示。我只想突出显示所选文本，但无法弄清楚。尝试选择第一个单词“The”...您会看到会发生什么。

旁注..我的突出显示功能基于 Johann Burkard 的突出显示插件..但想不出任何方法来进一步修改脚本。我愿意写一些新鲜的东西，但一直绞尽脑汁想弄清楚。

任何帮助，将不胜感激！！

Answer 1

事实上，使用document.execCommand(). 这有点复杂，因为您需要暂时使文档在非 IE 浏览器中可编辑才能document.execCommand()工作，这反过来会破坏某些浏览器中的选择，但这很容易解决。它适用于所有主要浏览器，包括 IE 6。

更新：已修复 IE 9。

jsFiddle： http: //jsfiddle.net/timdown/Hp7Zs/32/

代码：

function makeEditableAndHighlight(colour) {
    var range, sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // Use HiliteColor since some browsers apply BackColor to the whole block
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

function highlightSelection(colour) {
    var range, sel;
    if (window.getSelection) {
        // IE9 and non-IE
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}