Javascript window.getSelection（）与HTML标记的偏移量？

如果我有以下HTML：

<div class="content">
Vivamus <span>luctus</span> urna sed urna ultricies ac tempor dui sagittis.
</div>

我从内容中选择单词

Vivamus

，它将记录

1,8

，因为这是选择的范围

但是，如果我选择单词

urna

，它将记录

15、20

，但不会考虑HTML的

元素

---

是否有

focusOffset

和

baseOffset

也可以计算HTML标记，而不仅仅是文本？

更新

实例：

而且，我能够达到预期的效果

var txt = $('#Text').html();
$('#Text').html(
    txt.replace(/<\/span>(?:\s)*<span class="highlight">/g, '')
);
clearSelection();

（）

$（.content”）.on（“mouseup”，函数（）{
使可编辑并突出显示（“黄色”）；
});
函数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也许答案会有帮助，它有同样的问题/不处理我的问题。但是你需要链接。你想做什么？@PetersenDidIt从长远来看？我需要能够选择文本，然后让
元素包围文本，这样我就可以使它们突出显示。当你选择文本时，它是一个lready selected and text that not，我希望它们合并成一个突出显示。我不喜欢用于此目的的插件，因为它们太臃肿了，尤其是凌乱（我尝试过使用它）.我同意Rangy是臃肿的，但highlighter模块正是你想要的。是文件大小让你感到困扰吗？我喜欢第一个选项，因为它更简单。唯一的问题是它不提供跨度元素的碰撞。我的意思是，如果它们重叠，它们不会合并。你认为这很难实现吗？因为我不过，如果较大的
span
中有一个
span
，我可以合并这两个：，但是如果开始或结束与重叠的选择中的文本匹配，我不知道如何让它合并文本。这个怎么样：？使用了这个解决方案：@charlie，你是对的；我发布得太快了。它看起来像文本nodes让这有点棘手。我还在玩代码，很快就会发布一些东西。@Charlie。这看起来怎么样：我不认为这是完成任务的最有效的方式。我认为这已经接近完成你想要的了。
var txt = $('#Text').html();
$('#Text').html(
    txt.replace(/<\/span>(?:\s)*<span class="highlight">/g, '')
);
clearSelection();

window.highlight = function() {
    var selection = window.getSelection().getRangeAt(0);
    var selectedText = selection.extractContents();
    var span = document.createElement("span");
    span.style.backgroundColor = "yellow";
    span.appendChild(selectedText);
    span.onclick = function (ev) {
    this.parentNode.insertBefore(
        document.createTextNode(this.innerHTML), 
        this
    );
    this.parentNode.removeChild(this);
    }
    selection.insertNode(span);
}

$(".content").on("mouseup", function () {
   makeEditableAndHighlight('yellow'); 
});

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