Javascript Quandary:创建一个荧光笔工具......几乎就在那里

时间:2011-08-07 11:47:33

标签: javascript jquery selection highlight

我正在开发一个小插件,我希望它的功能与真正的荧光笔完全相同。使用标准的html文本div(带有子项),用鼠标选择文本,并在鼠标向上保持高亮显示。看起来相当直接,对吧?

以下是我到目前为止:http://efflux.us/text/views/select.php (右边的窗口只输出您的选择以进行测试)

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

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

2)当选择一个共同的单词或短语时,它的每个实例都会被突出显示。我希望只突出显示所选文本,但无法弄明白。尝试选择第一个单词“The”......你会看到会发生什么。

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

任何帮助都将不胜感激!!

1 个答案:

答案 0 :(得分:4)

实际上,使用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);
    }
}