JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<p>
    <button id="upper">UPPER CASE</button>
</p>
<textarea id="textarea">Highlight some of this text and click the button to make it upper case... right?</textarea>

CSS

#textarea {
    width: 350px
}

JavaScript

$(document).ready(function () {
    var selection;
    $("#textarea").select(function () {
        selection = window.getSelection().toString();
    });
    $("#upper").click(function () {
        if (selection) {
            var upper = selection.toUpperCase();
            var text = $("#textarea").text();
            $("#textarea").html(text.replace(selection, upper));
        }
    });
});