JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true">
    <span id="test_span">Hello World!</span>
</div>

<br>
<div id="console"></div>

JavaScript

$(document).ready(function() {
    (function($) {
        var Testing = {
            selectionTest: function() {
                if (window.getSelection) {
                    sel = window.getSelection();
                    if (sel.getRangeAt) {
                        var range = sel.getRangeAt(0);
                        $('#console').append('<p>Range collapsed: ' + range.collapsed + '</p>');
                    }
                }
            },
            init: function() {
                var that = this;
                $('#test_span').bind('click', function() {
                    that.selectionTest();
                });
            }
        };

        $(function() {
            Testing.init();
        });
    })(jQuery);
});

document.onselectionchange = function() {
    $('#console').append('<p>Selection changed, selected text is now' + (window.getSelection ? window.getSelection() : document.selection.createRange().text) + '</p>');
};