Javascript 窘境 : Creating a highlighter pen tool. .. 差不多了

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