Compare Two Texts

check two texts and highlight missing characters and misspellings

by arcm111

HTML

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

CSS

textarea, div {
    width: 200px;
    margin: 5px;
    height: 100px;
    padding: 5px;
}
div {
    border: 1px solid #333;
    height: 120px;
    overflow: auto;
    display: inline-block;
}
font {
    background: #eee;
}

JavaScript

function compare() {
    var elm1 = document.getElementById("txt1"),
        elm2 = document.getElementById("txt2"),
        txt1 = elm1.value.trim().replace(/\s+/g, ' '),
        txt2 = elm2.value.trim().replace(/\s+/g, ' '),
        arr1 = txt1.split(" "),
        arr2 = txt2.split(" "),
        len = Math.max(arr1.length, arr2.length),
        output1 = document.getElementById("div1"),
        output2 = document.getElementById("div2"),
        ori = "",
        sub = "",
        w = 0,
        spell = function (s1, s2) {
            if (s1 && s2) {
                var m = s2.match(new RegExp("[" + s1 + "]", "g")),
                    l = Math.max(s1.length, s2.length),
                    r = (m && m.length >= l * 0.5) ? true : false;
                return r;
            } else {
                return false
            };
        },
        highLight = function (s1, s2, out1, out2) {
            var t = Math.max(s1.length, s2.length),
                out1 = "",
                out2 = "",
                n = 0;

            for (var c = 0; c < t; c++) {
                d = c + n;
                if (s1.charAt(c) == s2.charAt(d)) {
                    out1 += s1.charAt(c);
                    out2 += s2.charAt(d);
                } else if (s1.charAt(c) != s2.charAt(d) && s1.charAt(c) != "") {
                    if (s1.charAt(c + 1) == s2.charAt(d)) {
                        out1 += s1.charAt(c).fontcolor("blue");
                        out2 += "_".fontcolor("red");
                        n--;
                        t++;
                    } else if (s1.charAt(c) == s2.charAt(d + 1)) {
                        out2 += s2.charAt(d).fontcolor("grey");
                        n++;
                        c--;
                    } else {
                        out1 += s1.charAt(c).fontcolor("green");
                        out2 += s2.charAt(d).fontcolor("red");
                    }
                } else if (s1.charAt(c) == "") {
                    out2...