JSFiddle - React, Tailwind, and code Playground

by codef0rmer

HTML

<script src="http://jquerypp.com/javascripts/jquerypp.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
         <script>
            grabSelectedText = function () {
                var    span = document.createElement("span"); 
                    span.style.fontWeight = "bold";
                    span.style.color = "red";

                if (window.getSelection) {
                    t = window.getSelection();
                } else if (document.getSelection) {
                    t = document.getSelection();
                } else if (document.selection) {
                    t = document.selection.createRange().text;
                }

                if (t.rangeCount) {
                    var range = t.getRangeAt(0).cloneRange();
                    range.surroundContents(span);
                    t.removeAllRanges();
                    t.addRange(range);
                }
                return t;
            }

            $(window).load(function () {
                $('button:first').click(function () {
                     var sel = grabSelectedText();
                     $('#foobar').val(sel);
                });
            });
</script>
    </head>
    <body>
       select me selet me select me select me.  <span>select</span> me selet me select me select me.  select me selet me select me select me.  select me selet me select me select me.  select me selet me select me select me.  select me selet me select me select me.  <br />
        <input id='foobar' type='text' /><button>Grab Selected Text!</button>
    </body>
</html>