正文

JQ 实现对比两个文本的差异并高亮显示差异部分

IP云
IP云V管理员/2 阅读
11/12
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

利用jq对比两段文本的差异，差异的内容用不同颜色表示出来。

在线参考demo：
http://incaseofstairs.com/jsdiff/

项目地址：
https://github.com/kpdecker/jsdiff

先上效果图：

左侧第一列是原稿，第二列是需要对比稿，第三列是对比后的结果。

红色文字删除线表示对比稿相对原稿缺少的文字，绿色下划线文字表示对比稿相对原稿新增的文字。

同时支持三种方式：Chars，以字符显示差异；Words，以整句或段显示对比差异；Lines以行显示差异。

html源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>比较文本差异</title>
    <style type="text/css">
        table { width: 100%; height: 600px; }
        tr { flex-direction: row; display: -webkit-flex; display: flex; height: 100%; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
            tr td { width: 33%; border: 1px solid #000000; }
        del { background: #ff0000; }
        ins { background: #00ff21; }
    </style>
</head>
<body>

    <div id="settings">
        <h1>比较文本差异（只适合比较纯文本且不带html标签）</h1>
        <label><input type="radio" name="diff_type" value="diffChars" checked> Chars</label>
        <label><input type="radio" name="diff_type" value="diffWords"> Words</label>
        <label><input type="radio" name="diff_type" value="diffLines"> Lines</label>
    </div>
    <a href="https://github.com/kpdecker/jsdiff" class="source">github.com/kpdecker/jsdiff</a>
    <table>
        <tr>
            <td contenteditable="true" id="a">restaurant</td>
            <td contenteditable="true" id="b">aura</td>
            <td><div id="result"></div></td>
        </tr>
    </table>

    <script src="/static/index/js/diff.js"></script>
    <script defer>
        var a = document.getElementById('a');
        var b = document.getElementById('b');
        var result = document.getElementById('result');

        function changed() {
            console.log('***********************************************');
            var oldContent = a.textContent;
            var content1 = b.textContent;

            //console.log("content1-----");
            //console.log(content1);

            //diffChars以字符显示差异
            //diffWords以整句或段显示对比差异
            //diffLines以行显示差异
            //window.diffType
            var diff = JsDiff[window.diffType](oldContent, content1);
            var arr = new Array();
            for (var i = 0; i < diff.length; i++) {
                if (diff[i].added && diff[i + 1] && diff[i + 1].removed) {
                    var swap = diff[i];
                    diff[i] = diff[i + 1];
                    diff[i + 1] = swap;
                }
                console.log(diff[i]);
                var diffObj = diff[i];
                var content = diffObj.value;

                //可以考虑启用，特别是后台清理HTML标签后的文本
                if (content.indexOf("\n") >= 0) {
                    //console.log("有换行符");
                    //替换为<br/>
                    var reg = new RegExp('\n', 'g');
                    content = content.replace(reg, '<br/>');
                }

                //var reg2 = new RegExp('##em2', 'g');
                //var reg3 = new RegExp('replace##', 'g');
                //content = content.replace(reg2, '');
                //content = content.replace(reg3, '');

                if (diffObj.removed) {
                    arr.push('<del title="删除的部分">' + content + '</del>');
                } else if (diffObj.added) {
                    arr.push('<ins title="新增的部分">' + content + '</ins>');
                } else {
                    //没有改动的部分
                    arr.push('<span title="没有改动的部分">' + content + '</span>');
                }
            }
            var html = arr.join('');
            //var reg = new RegExp('##em2.replace##', 'g');
            //html = html.replace(reg, '<span style="text-indent:2em;display: inline-block;">&nbsp;</span>');
            //$("#" + newId+"_show").html(html);
            //$("#result").html(html);
            result.innerHTML = html;
        }
        //function changed() {
        //    var diff = JsDiff[window.diffType](a.textContent, b.textContent);
        //    var fragment = document.createDocumentFragment();
        //    for (var i=0; i < diff.length; i++) {
        //        if (diff[i].added && diff[i + 1] && diff[i + 1].removed) {
        //            var swap = diff[i];
        //            diff[i] = diff[i + 1];
        //            diff[i + 1] = swap;
        //        }
        //        var node;
        //        if (diff[i].removed) {
        //            node = document.createElement('del');
        //            node.appendChild(document.createTextNode(diff[i].value));
        //        } else if (diff[i].added) {
        //            node = document.createElement('ins');
        //            node.appendChild(document.createTextNode(diff[i].value));
        //        } else {
        //            node = document.createTextNode(diff[i].value);
        //        }
        //        fragment.appendChild(node);
        //    }
        //    result.textContent = '';
        //    result.appendChild(fragment);
        //}

        window.onload = function () {
            onDiffTypeChange(document.querySelector('#settings [name="diff_type"]:checked'));
            changed();
        };

        a.onpaste = a.onchange =
            b.onpaste = b.onchange = changed;

        if ('oninput' in a) {
            a.oninput = b.oninput = changed;
        } else {
            a.onkeyup = b.onkeyup = changed;
        }

        function onDiffTypeChange(radio) {
            window.diffType = radio.value;
            document.title = "Diff " + radio.value.slice(4);
        }

        var radio = document.getElementsByName('diff_type');
        for (var i = 0; i < radio.length; i++) {
            radio[i].onchange = function (e) {
                onDiffTypeChange(e.target);
                changed();
            }
        }
    </script>
</body>
</html>