JSFiddle - React, Tailwind, and code Playground

by harsh dand

HTML

<div contenteditable="true" id="main">Having been knocked out in the group stages of
    their three previous tournament appearances, and not won a World Cup match in their last seven attempts, Algeria
    were looking for a lift at the Beira Rio stadium.
</div>

<div id="replace" contenteditable="true">World Cup</div>
<button onClick="replaceText()">Replace</button>
<script>
    function replaceText() {
    alert(document.getElementById('main').scrollHeight);
        var range = getTextSelection();
        if (typeof range.start != 'undefined') {
            var mainData = document.getElementById('main').innerHTML;
            var replaceData = document.getElementById('replace').innerHTML;
            if (replaceData.length > 0) {
                mainData = mainData.substring(0, range.start) +
                        replaceData +
                        mainData.substring(range.end, mainData.length);
                document.getElementById('main').innerHTML = mainData;
            }
        }
    }

    function getTextSelection(obj) {
        if (document.getSelection()) {
            var selection = document.getSelection();
            var range = {};
            if (selection.type === 'Range') {
                range.start = selection.getRangeAt(0).startOffset;
                range.end = selection.getRangeAt(0).endOffset;
            }
        }

        return range;
    }
</script>

CSS

div{
    width:500px;
    /* height:20px; */
    overflow:auto;
    border:1px gray solid;
    line-height:15px;
}