Question

我想突出显示用户选择的文字。我不能使用基于JQuery的API进行突出显示，因为我想要特定于用户的突出显示。

以下是我的代码的样子。

var range = window.getSelection().getRangeAt(0);
var sel = window.getSelection();
range.setStart( sel.anchorNode, sel.anchorOffset );
range.setEnd(sel.focusNode,sel.focusOffset);
highlightSpan = document.createElement("span");
highlightSpan.setAttribute("style","background-color: yellow; ");
highlightSpan.appendChild(range.extractContents()); 
range.insertNode(highlightSpan)

这适用于正常情况，但如果我在不同段落中选择一些文本，extractContents API将验证返回的HTML并添加其他标记以使其成为有效的HTML。我想要选择的确切HTML，而不需要javascript做的额外验证。

有什么办法可以做到吗？

此致蒂娜

Answer 1

这已经出现过几次：

How can I highlight the text of the DOM Range object? Javascript Highlight Selected Range Button

这是我的答案：

以下应该做你想要的。在非IE浏览器中，它打开designMode，应用背景颜色，然后再次关闭designMode。

function highlight(colour) {
    var range, sel;
    if (window.getSelection) {
        // Non-IE case
        sel = window.getSelection();
        if (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";
    } else if (document.selection && document.selection.createRange) {
        // IE case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

复杂选择的范围

1 个答案: