JSFiddle - React, Tailwind, and code Playground

HTML

Delete from <input id="from" value="8"> to <input id="to" value="15">
<input type="button" onclick="doDelete()" value="Delete">

<div id="container" class="line">
    Some text node here. <b>Some nodeType 3 here.</b> 
    More text here. <b>And here as well.</b>
</div>

JavaScript

function createRangeFromCharacterIndices(containerEl, start, end) {
    var charIndex = 0, range = document.createRange(), foundStart = false, stop = {};
    range.setStart(containerEl, 0);
    range.collapse(true);

    function traverseTextNodes(node) {
        if (node.nodeType == 3) {
            var nextCharIndex = charIndex + node.length;
            if (!foundStart && start >= charIndex && start <= nextCharIndex) {
                range.setStart(node, start - charIndex);
                foundStart = true;
            }
            if (foundStart && end >= charIndex && end <= nextCharIndex) {
                range.setEnd(node, end - charIndex);
                throw stop;
            }
            charIndex = nextCharIndex;
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                traverseTextNodes(node.childNodes[i]);
            }
        }
    }

    try {
        traverseTextNodes(containerEl);
    } catch (ex) {
        if (ex == stop) {
            return range;
        } else {
            throw ex;
        }
    }
}

function deleteBetweenCharacterIndices(el, from, to) {
    var range = createRangeFromCharacterIndices(el, from, to);
    range.deleteContents();
}       


function doDelete() {
    var from = +document.getElementById("from").value;
    var to = +document.getElementById("to").value;
    deleteBetweenCharacterIndices(document.getElementById("container"), from, to);
}