JSFiddle - React, Tailwind, and code Playground

by timdown

HTML

<div id="d1" contenteditable="true">One</div>
<div id="d2" contenteditable="true">Two</div>
<div id="d3" contenteditable="true">Three</div>

<div><input type="button" onclick="selectBoth()" value="select"></div>
<div id="d4" contenteditable="true">Four</div>
<div id="d5" contenteditable="true">Five</div>

JavaScript

window.onload = function() {
            if (window.getSelection) {
                var ids = ["d1", "d2", "d3"];
                var sel = window.getSelection();
                sel.removeAllRanges();
                for (var i = 0, len = ids.length, range; i < len; ++i) {
                    range = document.createRange();
                    range.selectNodeContents(document.getElementById(ids[i]));
                    sel.addRange(range);
                }
            }
        };

        function selectBoth() {
            var d4 = document.getElementById("d4");
            var d5 = document.getElementById("d5");
            if (window.getSelection) {
                var sel = window.getSelection();
                sel.removeAllRanges();
                var range = document.createRange();
                range.setStart(d4, 0);
                range.setEnd(d5, 1);
                sel.addRange(range);
            } else if (document.body.createTextRange) {
                var textRange = document.body.createTextRange();
                textRange.moveToElementText(d4);
                var textRange2 = textRange.duplicate();
                textRange.moveToElementText(d5);
                textRange.setEndPoint("EndToEnd", textRange2);
                textRange.select();
            }
        }