JSFiddle - React, Tailwind, and code Playground

by Oscar Jara

HTML

<span>Select elements from below to test!</span>
<hr/>
<div id="wrapper">
    <div id="div1"> Text1 </div>
    <div id="div2"> Text2 </div>
    <div id="div3"> Text3 </div>
    <img src="http://sstatic.net/programmers/img/apple-touch-icon.png"/>
    <a href="http://google.com" target="_blank">Link</a>
    <p>Extra text</p>
</div>

CSS

span{
    font-size: 20pt;
}

JavaScript

if(!window.Oscar){
    Oscar = {};
}

Oscar.Selector = {};
Oscar.Selector.getSelected = function(){
    var t = '';
    if(window.getSelection){
        t = window.getSelection();
    }else if(document.getSelection){
        t = document.getSelection();
    }else if(document.selection){
        t = document.selection.createRange().text;
    }
    return t;
}

Oscar.Selector.mouseup = function(){
    var selectedText = Oscar.Selector.getSelected();
    if(selectedText != ''){
       alert(selectedText);
       selectedText.removeAllRanges();
    }
}

$(document).ready(function(){
    $("#wrapper").bind("mouseup", Oscar.Selector.mouseup);
});