Javascript - 忽略html标记的StartOffset

Question

我写了一些概念代码证明来抓取任何突出显示的文本并将其包装在一个范围内。如果有人选择已经包含在跨度中的文本，我也希望将该跨度包装在内部。这样可以正常工作，除了第二次尝试在div中包装范围之后，因为起始偏移忽略了所有插入的HTML标记。有没有办法让这项工作？不能使用indexOf，因为存在相同单词的可能性。

$(function () {
    $('#highlightSelectLnk').click(function (event) {
        event.preventDefault();
        var startOffset = 0;
        var html = "";
        if (typeof window.getSelection != "undefined") {
            var sel = window.getSelection();
            if (sel.rangeCount) {
                var container = document.createElement("div");
                startOffset = sel.getRangeAt(0).startOffset;
                for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                    container.appendChild(sel.getRangeAt(i).cloneContents());
                }
                html = container.innerHTML;
            }
        } else if (typeof document.selection != "undefined") {
            if (document.selection.type == "Text") {
                html = document.selection.createRange().htmlText;
            }
        }

        var text = $('#editableContent').html();
        var replacedText = text.substring(0, startOffset) +
            '<span class="highlightedText">' + html + '</span>' + text.substring(startOffset + html.length, text.length);
        $('#editableContent').html(replacedText);

    });
});

小提琴：https://jsfiddle.net/df7nk7Lu/2/