Javascript - Невозможно получить родительский элемент для выделенного текста после замены выделения

Question

Я пытаюсь получить ближайший родительский элемент выделенного текста, он работает, если выделенный текст не был заменен, но после замены текста происходит сбой.

Вот код (я изменил из другого источника):

jQuery(document).ready(function($){
    $("#getparent").on("click touch", function(){
        var selection, elements = [], ranges = [], rangeCount = 0, parent_id, parent_class;     
        if (window.getSelection){
            selection = window.getSelection();
            if (selection.rangeCount) {
                var i = selection.rangeCount;
                while (i--) {
                    selectionrange = selection.getRangeAt(i);
                    ranges[i] = selectionrange.cloneRange();

                    // SELECTION START'S CONTAINER                  
                    var parentDataStart = selectionrange.startContainer.childNodes[ranges[i].startOffset];
                    parentDataStart = parentDataStart || selectionrange.startContainer.parentNode;
                    var parentTagStart = parentDataStart.tagName.toLowerCase(); // parent tag name of selection

                    console.log(parentTagStart);
                    alert(parentTagStart);

                    // SELECTED TEXT NODE
                    selectedtext = selection.toString();                    
                    elements[i] = document.createTextNode(selectedtext);
                    ranges[i].deleteContents();
                    ranges[i].insertNode(elements[i]);
                    ranges[i].selectNode(elements[i]);
                }

                // Restore text selection
                selection.removeAllRanges();
                i = ranges.length;
                while (i--) {
                    selection.addRange(ranges[i]);
                }
            }
        }
    });
});

А вот и скрипка

DEMO

Answer 1

Граница выбора узла должна быть перемещена в содержимое узла. Так что используйте selectNodeContents вместо.

в случае этого вопроса это должно быть:ranges[i].selectNodeContents(elements[i]); вместо ranges[i].selectNode(elements[i]);

Обновить:

Скрипка Демо