同一节点

Question

我正在尝试更改HTML节点上的选择的背景颜色。我可以这样做，直到我在同一元素中有多个选择。下面的图片是我目前能够做的：

这两个选项是否可以有不同的颜色，而它们在同一个节点中？

修改

以下是我想要的：

编辑2添加代码

var index = getIndexOfText();
var multiple = checkMultiple();
var selection = window.getSelection();
if(index > -1) {
    var range = document.createRange();
    var clone;

    if(multiple) {

        range.setStart(ele, sI);
        range.setEnd(ele, sI + sE);
        clone = range.cloneRange();
    } else {
        range.setStart(ele, sI);
        range.setEnd(ele, sI + sE);
    }

    selection.addRange(range);
    while(index >= 0 && multiple) {
        index = ele.textContent.indexOf(ranges[i].text, index + ranges[i].text.length);
        if(index > -1) {
            selIndex = index;
            selEnd = ranges[i].text.length;
            clone.setStart(ele, selIndex);
            clone.setEnd(ele, selIndex + selEnd);
            console.log(multiple, index);
            selection.addRange(clone);
        }
    }
}