JSFiddle - React, Tailwind, and code Playground

by vooor

HTML

<div id='t' contentEditable='true'>Text to select</div>

CSS

div {
    background-color:chartreuse;
    padding:20px;
}

JavaScript

var

    /**
     * return the available selection object 
     */
     getSelection = function()
    {
        // w3c compliant (all but not ie .. )
        if (window.getSelection) {
            return window.getSelection();
        }
        // ie :
        else if (document.selection) { 
            return document.selection.createRange();
        }
        return false;
    }
     /**
     * select a node 
     * @param {Object} node
     * @param {boolean} full node selection ? (default : false)
     */
    , selectNode = function(node,full) 
     {
        var   doc = window.document
            , sel
            , range
            , selection     = getSelection()
            ;

        if (window.getSelection && doc.createRange) {
            sel = window.getSelection();
            range = doc.createRange();
            
            console.log('node',node);
            
            if (full) { 
               // range.setStartBefore(node);
               // range.setEndAfter(node);
//console.warn(node.firstChild);            
                range.selectNode(node); 
            }
            else {range.selectNodeContents(node);}
            sel.removeAllRanges();
            sel.addRange(range);
            
            console.log(sel);
            var
                 fragment = sel.getRangeAt(0).cloneContents()
               , vNode    = document.createElement("div")
                ;
                vNode.appendChild(fragment);
                console.warn(vNode.innerHTML);

            
        } else if (doc.body.createTextRange) {
            range = doc.body.createTextRange();
            range.moveToElementText(node);
            range.select();
        }
    };


console && console.clear && console.clear();
selectNode(document.getElementById('t'),true);
//console.log(getCurrentTextSelection());