JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div class="container">
    <table>
        <tr>
            <td>
                <input type="text" id="input" placeholder="Name to copy" />
            </td>
            <td>
                <input readonly type="text" id="output" />
            </td>
        </tr>
        <tr>
            <td> <span id="oldLength">0</span>

            </td>
            <td> <span id="newLength">0</span>

            </td>
        </tr>
        <tr>
            <td>
                <button id="go">Copycat</button>
                <label title="Should help with collisions">
                    <input checked type="checkbox" id="group" />Group</label>
            </td>
            <td>
                <button id="select" title="You'll still have to manually copy the text">Select</button>
        </tr>
    </table>
</div>

CSS

* {
    box-sizing: border-box;
    font-family:"Segoe UI";
    max-width: 100%;
}
html, body {
    margin: 0;
}
body {
    background: #222;
    color: #eee;
    font-size: 1.2em;
}
input, button {
    background: #777;
    border: none;
    padding: 5px 8px;
    color: #fff;
    font-size: 1.2em;
}
table {
    background:lime;
    opacity:0.5;
    width:100%;
}
.container {
    max-width: 600px;
    width: 80%;
    background:red;
}

JavaScript

console.clear();

(function () {
    var invis = "\u2063";

    var input = document.getElementById("input");
    var output = document.getElementById("output");
    var go = document.getElementById("go");
    var select = document.getElementById("select");
    var group = document.getElementById("group");
    var oldLength = document.getElementById("oldLength");
    var newLength = document.getElementById("newLength");

    function rand(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    function copycat(oldName, group) {
        //Attempt to replace at only spaces
        if (oldName.indexOf(" ") > -1) {
            return oldName.replace(/ /g, " " + invis);
        }
        //Not using in a group, append the space to end
        else if (!group) {
            oldName += invis;
        }
        //Using in group, randomly put in a few spaces
        else {
            var spacesToInsert = Math.min(oldName.length / 4, 4) + 1;
            for (var i = 0; i++ < spacesToInsert;) {
                var pos = rand(0, oldName.length);
                oldName = oldName.substr(0, pos) + invis + oldName.substr(pos);
            }
        }

        return oldName;
    }

    input.oninput = function () {
        oldLength.innerText = input.value.length;
    };

    go.onclick = function () {
        var newName = input.value;
        if (newName.length) {
            newName = copycat(newName, group.checked);
            output.value = newName;
            newLength.innerText = output.value.length;
        }
    };

    select.onclick = function () {
        output.select();
    };

})();