JSFiddle - React, Tailwind, and code Playground

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>
    <p>Short words that should just work:</p>
    <ul>
      <li>hard</li>
      <li>work</li>
    </ul>
    <p>Words this make trip up on:</p>
    <ul>
      <li>peel</li>
      <li>seek</li>
    </ul>
    <p>Words it needs to have exceptions for:</p>
    <ul>
      <li>feeling</li>
      <li>cookies</li>
    </ul>

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; }

JavaScript

$(function(){                                                              // on load
      $('*','body').contents().map(function(i,e){                                     // grab all elements,
        return e.nodeType !== 3 ? null : e;                                    // then filter by textual elements
      }).each(function(i,e){                                                   // amd iterate through them.
        e.data = e.data.replace(/\b[a-z]{4,}\b/ig, function(w) {               // go through and find 4+ letters words
          if (w.length==4&&w.substring(1,2)==w.substring(2,3))                  // (avoid infinite loops on words that
            return w;                                                          // can't be changed [e.g. look])
          var e = w;                                                            // Store the original word for comparison, but
          while (e==w){                                                         // keep scrambling until we have a new word.
            var x = w.split('');                                                // (do so by breaking out middle letters in to array,
            e = x[0] + (x.slice(1, x.length - 1).sort(function(a,b){           // then sort those middle letters
              return (Math.random() * 2) > 1 ? 1 : -1;                         // based on a random number)
            }).join('')) + x[x.length - 1];                                     // Now, rejoin it all back together
          }
          return e;                                                            // and finally return the modified result.
        });
      });
    });