JSFiddle - React, Tailwind, and code Playground

by MarkSchultheiss

HTML

<div id='mydiv'>div related text from the text div</div>
<textarea id='testtext' rows='3' cols='45' >Dear Freddy,
    I have traveled all over with my bag.  Now it is up to you to water them.<br/>It is time for all the cows to come home so I will attend to that next.<p>Johnny Appleseed</textarea>
    <div class='results'>You Selected:    
        <div id='youselected'></div>
    </div>

CSS

#youselected
{
    background-color: #DDDDDD;
    border: solid 2px blue;
}
.results
{
    margin-top: 2em;
}

JavaScript

// create my namespace
if (!window.Schultheiss) {
    Schultheiss = {};
}
//Add TextSelector to my namespace
Schultheiss.TextSelector = {};
//Add getSelected function to my namespace
Schultheiss.TextSelector.getSelected = function() {
    var tx = '';
    if (window.getSelection) {
        tx = window.getSelection();
    } else if (document.getSelection) {
        tx = document.getSelection();
    } else if (document.selection) {
        tx = document.selection.createRange().text;
    }
    return tx;
};
Schultheiss.TextSelector.mouseup = function() {
    var st = Schultheiss.TextSelector.getSelected();
    if (st === ' ') {
        st = '&nbsp;';
    }
    if (st !== '') {
        $('#youselected').html(st);
    }
};
$(document).ready(function() {
    // bind to document, could bind to other more specific if needed
    $(document).bind("mouseup", Schultheiss.TextSelector.mouseup);
    //example of binding more specific  $('#testtext').bind("mouseup", Schultheiss.TextSelector.mouseup);
});