Javascript getSelection&；在多个标记上环绕内容

我有一个脚本，可以改变所选文本的背景颜色。但是，当跨多个元素/标记选择文本时，我遇到了一个问题

我得到的代码是：

var text = window.getSelection().getRangeAt(0);
var colour = document.createElement("hlight");
colour.style.backgroundColor = "Yellow";
text.surroundContents(colour);

输出的错误是：

Error: The boundary-points of a range does not meet specific requirements. =
NS_ERROR_DOM_RANGE_BAD_BOUNDARYPOINTS_ERR
Line: 7

我相信这与getRange（）函数有关，尽管我不太确定如何继续，因为我是javascript的初学者

有没有其他方法可以复制我想要实现的目标

---

非常感谢

今天有人问了这个问题：

以下是我的答案：

以下内容应该是您想要的。在非IE浏览器中，它会打开设计模式，应用背景色，然后再次关闭设计模式

更新

固定在IE 9中工作

function makeEditableAndHighlight(colour) {
    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 highlight(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);
    }
}

函数makeeditable和highlight（彩色）{
sel=window.getSelection（）；
if（sel.rangeCount&&sel.getRangeAt）{
范围=选择范围（0）；
}
document.designMode=“on”；
如果（范围）{
选择removeAllRanges（）；
选择添加范围（范围）；
}
//使用HiliteColor，因为某些浏览器将背景色应用于整个块
if（！document.execCommand（“HiliteColor”，false，color））{
document.execCommand（“背景色”，假，彩色）；
}
document.designMode=“关闭”；
}
功能突出显示（彩色）{
var范围，sel；
if（window.getSelection）{
//IE9和非IE
试一试{
if（！document.execCommand（“BackColor”，false，color））{
可编辑并突出显示（颜色）；
}
}捕获（ex）{
可编辑并突出显示（彩色）
}
}else if（document.selection&&document.selection.createRange）{
//IE我认为在这种情况下，库的使用非常好。库的目的是突出显示HTML文档中某个单词的所有实例，但是可以通过过滤器选项函数进行调整，并且可以通过每个选项函数添加额外的span属性

function markFunc(node, text, color) {
  var instance = new Mark(node);
    instance.mark(text, {
    "element": "span",
      "className": color,
      "acrossElements": true,
      "separateWordSearch": false,
      "accuracy": "partially",
      "diacritics": true,
      "ignoreJoiners": true,
    "each": function(element) {
            element.setAttribute("id", "sohayb");
            element.setAttribute("title", "sohayb_title");
       },
    "done":function(totalMarks) {
            window.getSelection().empty();//This only in Chrome
            console.log("total marks: " + totalMarks);
     },
      "filter": function(node, term, totalCounter, counter) {
        var res = false;
        if (counter == 0) {
            res = selectionRange.isPointInRange(node, selectionRange.startOffset);
        } else {
        res = selectionRange.isPointInRange(node, 1);
        }
        console.log("Counter: " + counter + ", startOffset: " + selectionRange.startOffset);
        return res;
        }
  });
};

检查此选项，查看突出显示用户选择的完整代码，即使是跨多个HTML元素的代码。
重复的和非常感谢Tim，这非常有效，并对重复表示歉意。我的搜索中没有出现另一个线程。但是如何调用函数highlight？@LayaleMatta:示例：
突出显示（#ff0000”）
将为当前选定的文本添加一个红色背景。@TimDown您能为上面的代码共享一把小提琴吗。