复杂选择范围

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。 我想要在没有 javascript 所做的额外验证的情况下选择的确切 HTML。

有什么办法可以做到吗？

问候， 蒂娜

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