JSFiddle - React, Tailwind, and code Playground

by prince4prodigy

HTML

<h3>hello world! hello world! hello world</h3>
<div>hello world! hello world hello world!</div><span>hello world! hello world</span>

CSS

.red{color:red;}

JavaScript

if (!window.selectText) {
        selectText = {};
    }
    selectText.Selector = {};
    selectText.Selector.mouseup = function (e) {
        var userSelection;
        if (window.getSelection) {
            userSelection = window.getSelection();
        }
        else if (document.selection) {
            // should come last; Opera!
            userSelection = document.selection.createRange();
        }

        var selectedText = userSelection;
        if (userSelection.text) selectedText = userSelection.text;

        if (selectedText != '') {
            var array = [selectedText, e.pageX, e.pageY];
            return array;
        } else return '';
    }

    $(document).ready(function () {
        $(document).on("mouseup", function (e) {
            var textSelected ='';
            var posX = '';
            var posY = '';
            setTimeout(function () {
                getSElected = selectText.Selector.mouseup(e)
                if (getSElected != '') {
                    textSelected = getSElected[0];
                    posX = getSElected[1];
                    posY = getSElected[2];
                    highlight(textSelected, posX, posY)
                }
            }, 200);
        });

        function highlight(text, x, y) {
            alert(text+'***'+x+'***'+y)
            window.getSelection().removeAllRanges();
        }

    });