JSFiddle - React, Tailwind, and code Playground

by kapantzak

HTML

<div>
    <label for="text1">textarea:</label>
    <br />
    <textarea id="text1" class="text">test1 test2 test3</textarea>
    <br />
    <button class="copy">copy from textarea</button>
</div>
<br />
<div>
    <label for="text2">div:</label>
    <div id="text2" class="text">test4 test5 test6</div>
    <button class="copy">copy from div</button>
</div>

CSS

#text1 {
    width: 100%;
    height: 30px;
}

#text2 {
    border: 1px solid #000;
    height: 30px;
}

JavaScript

jQuery.fn.getSelectedText = function() {
    var sSelectedText = "";
    // all browsers, except IE before version 9
    if (window.getSelection) {
        var sTagName = this.get(0).tagName.toLowerCase();
        sSelectedText = (
            sTagName == 'input' || sTagName == 'textarea' ?
            this.val().substring (
                this.get(0).selectionStart
                , this.get(0).selectionEnd
            ) :
            document.getSelection().toString()
        );
    } 
    // Internet Explorer before version 9
    else {
        if (document.selection.createRange) {
            sSelectedText = document.selection.createRange().text;
        }
    }
    return sSelectedText;
}

$('.copy').click(function() {
    alert($(this).parent().find('.text').getSelectedText());
});