JSFiddle - React, Tailwind, and code Playground

by CookieJon

HTML

<div id="log">

</div>

CSS

#log {
  border:1px solid red;
  padding:20px;
  font-size:14px;
  font-weight:bold;
}

JavaScript

t='It is well known that a text can still be read while the innards of its words have been scrambled, as long as their first and last letters plus their overall outlines remain constant. Given a printable Ascii+Newline text, scramble each word according to these rules:'

a=t.replace(/\B(\w+)\B/g,b=>{return[/[acemnorsuvwxz]/g,/[bdfhkl]/g,/[gpqy]/g,/[it]/g].forEach(d=>{g=b.match(d),b=b.replace(d,c=>{return g.splice(Math.random()*g.length,1)})}),b})

document.getElementById('log').innerHTML = a