JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<div id="div1"></div>
<div id="div2"></div>
<p>
    <textarea id="txt1"></textarea>
    <textarea id="txt2"></textarea>
    <br/>
    <input type="button" value="Compare" onClick="check()" />
</p>

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;
}
textarea {
    width: 200px;
    height: 60px;
    margin: 5px;
    padding: 10px;
}
label {
    color: grey;
}

JavaScript

function check() {
    var elm1 = document.getElementById("txt1"),
        elm2 = document.getElementById("txt2"),
        output1 = document.getElementById("div1"),
        output2 = document.getElementById("div2"),
        txt1 = elm1.value.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.value,
        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");
               ...