JSFiddle - React, Tailwind, and code Playground

HTML

<p id="output"></p>

CSS

pre {
    display: inline;
}

JavaScript

var source2 = "og834tnUEF*bt"; //random string
var target2 = "Hello, world!";
var output = document.getElementById('output');

function fitness(source, target) {
    var fitval = 0;
    for(var i = 0; i < source.length; i++) {
        fitval += Math.pow(target.charCodeAt(i) - source.charCodeAt(i), 2);
    } return (fitval);
}

function mutate(source) {
    var charpos = Math.floor(Math.random() * source.length);
    parts = source.split("");
    var temp = String.fromCharCode(source.charCodeAt(charpos) + (Math.random() < 0.5 ? -1 : 1));
    parts[charpos] = temp;
    return (parts.join(""));
}

//functions end

var fitval = fitness(source2, target2);
var p = 0;
while(true) {
    p += 1;
    mutant = mutate(source2);
    mutFit = fitness(mutant, target2);
    if (mutFit < fitval) {
        fitval = mutFit;
        source2 = mutant;
        output.innerHTML += (p + " : " + mutFit + "  :  <pre>" + mutant + "</pre><br />");
    } if (fitval === 0) break;
}