JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<div id="txt1">My name is Albert Instine</div>
<div id="txt2">type in text field below and click submit to check your spellings...</div>

<input type="text" id="newtxt" size="40" value="My name is Albarit Inshtayne" />
<input type="submit" onClick="check()" value="submit" />

CSS

div {
    float: left;
    width: 200px;
    height: 160px;
    margin: 5px;
    padding: 10px;
    border: 1px solid #333;
}

JavaScript

function check() {
    var elm1 = document.getElementById("txt1"),
        elm2 = document.getElementById("newtxt"),
        output = document.getElementById("txt2"),
        txt1 = elm1.innerHTML,
        txt2 = elm2.value,
        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] + "\\s?"), "");
        } else if (!match) {
            arr2.push(arr1[i]);
        }
    }
    console.log(arr2, txt2);
    var arr3 = txt2.split(" ");
    for (var a in arr2) {
        for (var b in arr3) {
            var match2 = arr3[b].match(new RegExp("[" + arr2[a] + "]", "g"));
            if (match2 && match2.length > arr3[b].length / 2) {
                var l = (arr2[a].length > arr3[b].length) ? arr2[a].length : arr3[b].length;
                var str = "";
                var correction = elm2.value;
                for (var c = 0; c < l; c++) {
                    if (arr2[a].charAt(c) == arr3[b].charAt(c)) {
                        str += arr2[b].charAt(c).fontcolor("green");
                    } else if (arr2[a].charAt(c) != arr3[b].charAt(c) || !arr3[b].charAt(c)) {
                        str += arr2[b].charAt(c).fontcolor("red");
                    }else if(!= arr2[a].charAt(c));
                }
                correction = correction.replace(arr3[b], str);
            } else {
                correction = correction.replace(arr3[b], arr3[b].fontcolor("red"));
            }
        }
    }
    output.innerHTML = correction;
}