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
// "Basic" 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){
            // basic options
            var o = $.extend({
                flagChanges: false,
                changeClass: 'modified'
            },options);
            // iterate over elements
            return this.each(function(i,e){
                var txt = $(e).text();
                // locate words with 4+ letters
                $(e).html(txt.replace(/\b[a-z]{4,}\b/ig,function(w){
                    var e = w;
                    // make sure we get an altered word back
                    while (e==w){
                        var x = w.split('');
                        e = x[0]+(x.slice(1,x.length-1).sort(function(y,z){
                            return (Math.random()*2)>1?1:-1; // randomize
                        }).join(''))+x[x.length-1];
                    }
                    return (o.flagChanges?'<span class="'+o.changeClass+'">'+e+'</span>':e);
                }));
            });
        }
    });
})(jQuery);

// explicit mention of the deepest element (notice link in first paragraph went away)
$('h2,h3,p,li').garble({
    flagChanges: true
});