JSFiddle - React, Tailwind, and code Playground

by Brad Christie

HTML

<div id="original-content">
    <h2><a name="top">This is a heading</a></h2>
    <h3>This is a sub-heading</h3>
    <p>A paragraph may contain <a href="http://google.com/">Hyperlinks</a> or other elements such as:</p>
    <ul>
        <li>List items</li>
        <li>Words with <span style="color:green">span styles</span> applied</li>
        <li>etc.</li>
    </ul>
    <p>You may also have form elements within tables, such as:</p>
    <table>
        <tr>
            <td>Input Text</td>
            <td><input type="text" value="input text would belong here" /></td>
        </tr>
        <tr>
            <td>Radio Buttons:</td>
            <td>
                <label><input type="radio" name="radio1" /> Radio option 1</label><br />
                <label><input type="radio" name="radio1" /> Radio option 2</label>
                <label><input type="radio" name="radio1" /> Radio option 3</label>
            </td>
        </tr>
        <tr>
            <td>Textarea</td>
            <td><textarea name="text">Some piece of text area text would belong here.</textarea></td>
        </tr>
    </table>
</div>

CSS

h2 { font-size: xx-large; font-weight: bold; }
h3 { font-size: x-large; text-decoration: underline; }
p { margin: 10px 0; text-indent: 10px; }
ul { list-style-type: circle; margin: 10px 25px; padding: 10px; }

#original-content { background-color: #80FF80; }
#clone-low { background-color: #666666; }
#clone-high { background-color: #CCCCCC; }

span.modified { background-color: #FFF000; color: black; }

JavaScript

// jQuery Garble
// "Feature Rich" version
//
// Requirements:
// 1. Find all words 4+ letters long (exclude hyphens, punctuation or numbers from
//    the classification)
// 2. The words being garbled must follow:
//    a. They can not remain the same as the previous state
//    b. The first and last character must remain in-tact
// 3. The garbling must be random and produce a new result each iteration.
//
// Usage:
// $(selector).garble(options);
//
(function($) {
    $.fn.extend({
        garble: function(options) {
            var o = $.extend({}, $.fn.garble.defaults, options);
            
            // takes in a string and performs the necessary manipulation(s) on it. Use regex
            // to only collect words greater than or equal to 4 characters long, and consider
            // punctuation not part of the word.
            var garbleStr = function(s,t){
                return s.replace(/\b[a-z]{4,}\b/ig, function(w) {
                    var e = o.algorithm(w);
                    
                    // if we're not performing a low-level parse and they want the changes styled,
                    // return a span with either the detault class or their custom class
                    if (t && !o.lowLevel && o.highLevel.flagChanges)
                        return '<span class="'+o.highLevel.changeClass+'">'+e+'</span>';
                    
                    // just return the new word
                    return e;
                });
            };

            // Very high-level process.
            // Will only change the lowest node's text (so a paragraph
            // with links, only the links will be altered)
            var highLevel = function(i, e) {
                // we're not at the bottom element, keep going
                if ($(e).children().length>0){
                    return $(e).children().each(highLevel);
                }
                
                var t = $(e).text();
               ...