js比较两个字符串，高亮标出不同处

下面是测试图，各位自己看一下。

话不多说，直接Push代码，至于是为什么，就自己研究了，因为我这边也是因为客户需求才会写这一段。

CSS代码

textarea {
    border: 1;
    overflow: auto;
    height: 100%;
    width: 100%
}

input {
    border: 1;
    overflow: auto;
    height: 99%;
    width: 96%
}

Html代码

<form>
    <fieldset>
        <div class="form-group">
            <div class="col-sm-4">
                <textarea rows="2" cols="20" type="text" id="inpLeft" name="inpLeft">zhani/shan</textarea>
            </div>
            <div class="col-sm-2">
                    <input id="inpStartCompare" type="button" value="输出" onclick="return startCompare();" />
            </div>
            <div class="col-sm-4">
                    <textarea rows="2" cols="20" type="text" id="inpRight" name="inpRight">zhang.shei</textarea>
            </div>
        </div>
    </fieldset>
    <br />
    <div class="container">
        <div id="show1" class="panel panel-primary"></div>
        <div id="show2" class="panel panel-primary"></div>
    </div>
</form>

Js代码

function startCompare() {
        var a = $.trim($("#inpLeft").val());
        var b = $.trim($("#inpRight").val());

        // var result = getHighLightDifferent(a, b);
        // //getHighLightDifferent("1000", "10012");
        // console.log(getHighLightDifferent(a, b))


        var result = highlight(a, b);
        console.log(result)
        $("#show1").html(result[0]);
        $("#show2").html(result[1]);
        return false;
        console.log($("#inpLeft"))
    }

    function distinct(arr) {
        var obj = {};
        var result = [];
        for (i = 0; i < arr.length; i++) {
            if (!obj[arr[i]]) { //如果能查找到，证明数组元素重复了
                obj[arr[i]] = 1;
                result.push(arr[i]);
            }
        }
        return result;
    };

    function highlight() {
        var params = Array.prototype.slice.call(arguments);
        var result = params.map(function (e) {
            e = e.toUpperCase();
            e = e.replace(
                /[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?]/g,
                "");
            return e.split("");
        });
        var maxLen = eval(" Math.max(" + result.map(function (e) {
            return e.length
        }).join(",") + ")");
        result.forEach(function (e) {
            if (e.length < maxLen) {
                e.length = maxLen;
            };
        });
        var index = [];
        for (var i = 0; i < result[0].length; i++) {
            if (result[0][i] === result[1][i]) {
                continue;
            } else {
                index.push(i);
            }
        };

        index.forEach(function (e) {
            result[0][e] = "<p class='red'>" + (result[0][e] ? result[0][e] : "") + "</p>"
            result[1][e] = "<p class='red'>" + (result[1][e] ? result[1][e] : "") + "</p>"
        });
        return result
    }