Javascript - Cannot Get Parent Of Selected Text After Replacing The Selection

Question

I am trying to get the closest parent element of the selected text, it works if the selected text hasn't been replaced, but it fails after the text replacement.

Here is the code (I modified from other source):

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

And Here is A Fiddle

DEMO

Answer 1

the node selection boundary should be moved to the node's content. So use selectNodeContents instead.

in the case of that question, it should be: ranges[i].selectNodeContents(elements[i]); instead of ranges[i].selectNode(elements[i]);

Update:

Fiddle Demo