JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">My name is fer</div>
<div id="div2">Type in text field below and click submit to check your spellings...</div>

<input type="text" id="newtxt5" size="40" value="My name is Michel" />
<input type="submit" onClick="check('newtxt5')" value="submit" /><label>&nbsp;&nbsp;Missing characters.</label><br/>

<input type="text" id="newtxt1" disabled size="40" value="May name is Michael" />
<input type="submit" onClick="check('newtxt1')" value="submit" /><label>&nbsp;&nbsp;Extra characters.</label><br/>


<input type="text" id="newtxt2" disabled size="40" value="My Name is Michael" />
<input type="submit" onClick="check('newtxt2')" value="submit" /><label>&nbsp;&nbsp;Characters case sensitivity.</label><br/>

<input type="text" id="newtxt3" disabled size="40" value="name is Mikael" />
<input type="submit" onClick="check('newtxt3')" value="submit" /><label>&nbsp;&nbsp;missing words.</label><br/>

<input type="text" id="newtxt4" disabled size="40" value="My nane is Michael Jackson" />
<input type="submit" onClick="check('newtxt4')" value="submit" /><label>&nbsp;&nbsp;extra words.</label><br/>

CSS

div {
    float: left;
    width: 200px;
    height: 160px;
    margin: 5px;
    padding: 10px;
    border: 1px solid #333;
    font-family: tahoma;
    font-size: 12px;
}
body{
    font-family: tahoma;
    font-size: 12px;
}
label{color: grey;}

JavaScript

function check(el) {
    reset();
    var elm1 = document.getElementById("div1"),
        elm2 = document.getElementById(el),
        output = document.getElementById("div2"),
        txt1 = elm1.innerHTML.trim().replace(/\s+/g, ' '),
        txt2 = elm2.value.trim().replace(/\s+/g, ' '),
        arr1 = txt1.split(" "),
        arr2 = [];

    for (var i in arr1) {
        var match = txt2.match(new RegExp("\\b" + arr1[i] + "\\b"));
        if (match) {
            txt2 = txt2.replace(new RegExp("\\s?" + arr1[i]), "");
            txt1 = txt1.replace(new RegExp("\\s?" + arr1[i]), "");
        } else if (!match) {
            arr2.push(arr1[i]);
        }
    }
    var arr3 = txt2.split(" "),
        right = elm1.innerHTML,
        wrong = elm2.value;
    for (var a in arr2) {
        for (var b in arr3) {
            var match2 = arr3[b].match(new RegExp("[" + arr2[a] + "]", "g")),
                t = Math.max(arr2[a].length, arr3[b].length);
            if (match2 && match2.length >= t * 0.5) {
                txt2 = txt2.replace(new RegExp("\\s?" + arr3[b]), "");
                txt1 = txt1.replace(new RegExp("\\s?" + arr2[a]), "");
                var str1 = "",
                    str2 = "",
                    n = 0;
                for (var c = 0; c < t; c++) {
                    if (arr2[a].charAt(c) === arr3[b].charAt(c + n)) {
                        str1 += arr3[b].charAt(c + n);
                        str2 += arr2[a].charAt(c);
                    } else if (arr2[a].charAt(c) !== arr3[b].charAt(c + n)) {
                        if(arr2[a].charAt(c + 1) == arr3[b].charAt(c + n)){
                            str2 += arr2[a].charAt(c).fontcolor("blue");
                            str1 += "_".fontcolor("red");
                            n--;
                        }else if(arr2[a].charAt(c) == arr3[b].charAt(c + n + 1)){
                            str1 += arr3[b].charAt(c + n).fontcolor("orange");
                            n++;
                    ...