前端JS文本比较插件

Posted 2020-10-08 雷明

一、先上效果图

二、JS代码

/**
 * 【文本比较插件】
 * 传递两个参数dom1、dom2，以dom1为基准进行比较。
 * 0）dom1和dom2不能都为空；
 * 1）如果dom1不存在，则dom2为新增效果
 * 2）如果dom2不存在，则dom1为删除效果
 * 3）如果dom1和dom2存在，则进行文本差异比较
 *
 */
(function(window,document){
    function MyCompare(dom1,dom2){
        if(!dom1&&!dom2){
            console.log(\'参数错误：dom1、dom2不能为空。\');
            return;
        }
        else if(!dom1){
            //dom1为空：新增
            dom2.style.color = \'#90EE90\';
        }else if(!dom2){
            //dom2为空：删除
            dom1.style.color = \'#FF6347\';
            dom1.style.textDecoration = \'line-through\';
        }else{
            //进行差异比较
            var result = _eq({value1:dom1.innerText||dom1.innerhtml,value2:dom2.innerText||dom2.innerHTML});
            dom1.innerHTML = result.value1;
            dom2.innerHTML = result.value2;
        }
    }
    function _eq(op) {
        if(!op){
            return op;
        }
        if(!op.value1_style){
            op.value1_style="background-color:#FEC8C8;";
        }
        if(!op.value2_style){
            op.value2_style="background-color:#FEC8C8;";
        }
        if(!op.eq_min){
            op.eq_min=3;
        }
        if(!op.eq_index){
            op.eq_index=5;
        }
        if (!op.value1 || !op.value2) {
            return op;
        }
        var ps = {
            v1_i: 0,
            v1_new_value: "",
            v2_i: 0,
            v2_new_value: ""
        };
        while (ps.v1_i < op.value1.length && ps.v2_i < op.value2.length) {
            if (op.value1[ps.v1_i] == op.value2[ps.v2_i]) {
                ps.v1_new_value += op.value1[ps.v1_i].replace(/</g,"<").replace(">",">");
                ps.v2_new_value += op.value2[ps.v2_i].replace(/</g,"<").replace(">",">");
                ps.v1_i += 1;
                ps.v2_i += 1;
                if (ps.v1_i >= op.value1.length) {
                    ps.v2_new_value += "<span style=\'" + op.value2_style + "\'>" + op.value2.substr(ps.v2_i).replace(/</g,"<").replace(">",">") + "</span>";
                    break;
                }
                if (ps.v2_i >= op.value2.length) {
                    ps.v1_new_value += "<span style=\'" + op.value1_style + "\'>" + op.value1.substr(ps.v1_i).replace(/</g,"<").replace(">",">") + "</span>";
                    break;
                }
            } else {
                ps.v1_index = ps.v1_i + 1;
                ps.v1_eq_length = 0;
                ps.v1_eq_max = 0;
                ps.v1_start = ps.v1_i + 1;
                while (ps.v1_index < op.value1.length) {
                    if (op.value1[ps.v1_index] == op.value2[ps.v2_i + ps.v1_eq_length]) {
                        ps.v1_eq_length += 1;
                    } else if (ps.v1_eq_length > 0) {
                        if (ps.v1_eq_max < ps.v1_eq_length) {
                            ps.v1_eq_max = ps.v1_eq_length;
                            ps.v1_start = ps.v1_index - ps.v1_eq_length;
                        }
                        ps.v1_eq_length = 0;
                        break;//只寻找最近的
                    }
                    ps.v1_index += 1;
                }
                if (ps.v1_eq_max < ps.v1_eq_length) {
                    ps.v1_eq_max = ps.v1_eq_length;
                    ps.v1_start = ps.v1_index - ps.v1_eq_length;
                }

                ps.v2_index = ps.v2_i + 1;
                ps.v2_eq_length = 0;
                ps.v2_eq_max = 0;
                ps.v2_start = ps.v2_i + 1;
                while (ps.v2_index < op.value2.length) {
                    if (op.value2[ps.v2_index] == op.value1[ps.v1_i + ps.v2_eq_length]) {
                        ps.v2_eq_length += 1;
                    } else if (ps.v2_eq_length > 0) {
                        if (ps.v2_eq_max < ps.v2_eq_length) {
                            ps.v2_eq_max = ps.v2_eq_length;
                            ps.v2_start = ps.v2_index - ps.v2_eq_length;
                        }
                        ps.v1_eq_length = 0;
                        break;//只寻找最近的
                    }
                    ps.v2_index += 1;
                }
                if (ps.v2_eq_max < ps.v2_eq_length) {
                    ps.v2_eq_max = ps.v2_eq_length;
                    ps.v2_start = ps.v2_index - ps.v2_eq_length;
                }
                if (ps.v1_eq_max < op.eq_min && ps.v1_start - ps.v1_i > op.eq_index) {
                    ps.v1_eq_max = 0;
                }
                if (ps.v2_eq_max < op.eq_min && ps.v2_start - ps.v2_i > op.eq_index) {
                    ps.v2_eq_max = 0;
                }
                if ((ps.v1_eq_max == 0 && ps.v2_eq_max == 0)) {
                    ps.v1_new_value += "<span style=\'" + op.value1_style + "\'>" + op.value1[ps.v1_i].replace(/</g,"<").replace(">",">") + "</span>";
                    ps.v2_new_value += "<span style=\'" + op.value2_style + "\'>" + op.value2[ps.v2_i].replace(/</g,"<").replace(">",">") + "</span>";
                    ps.v1_i += 1;
                    ps.v2_i += 1;

                    if (ps.v1_i >= op.value1.length) {
                        ps.v2_new_value += "<span style=\'" + op.value2_style + "\'>" + op.value2.substr(ps.v2_i).replace(/</g,"<").replace(">",">") + "</span>";
                        break;
                    }
                    if (ps.v2_i >= op.value2.length) {
                        ps.v1_new_value += "<span style=\'" + op.value1_style + "\'>" + op.value1.substr(ps.v1_i).replace(/</g,"<").replace(">",">") + "</span>";
                        break;
                    }
                } else if (ps.v1_eq_max > ps.v2_eq_max) {
                    ps.v1_new_value += "<span style=\'" + op.value1_style + "\'>" + op.value1.substr(ps.v1_i, ps.v1_start - ps.v1_i).replace(/</g,"<").replace(">",">") + "</span>";
                    ps.v1_i = ps.v1_start;
                } else {
                    ps.v2_new_value += "<span style=\'" + op.value2_style + "\'>" + op.value2.substr(ps.v2_i, ps.v2_start - ps.v2_i).replace(/</g,"<").replace(">",">") + "</span>";
                    ps.v2_i = ps.v2_start;
                }
            }
        }
        op.value1 = ps.v1_new_value;
        op.value2 = ps.v2_new_value;
        return op;
    }
    window.CompareTxt = MyCompare;
})(window,document);

 

三、调用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>360手机浏览器小说新人专享礼包</title>
    <style>
         html,body{
             margin:0;
             padding:0;
         }
         fieldset{
             width:200px;
             margin:20px auto;
         }
    </style>
</head>
<body>
<fieldset>
    <legend>添加效果</legend>
    <div id="div1">1111111</div>
    <div id="div2">2211122</div>
</fieldset>

<fieldset>
    <legend>删除效果</legend>
    <div id="div3">1111111</div>
    <div id="div4">2211122</div>
</fieldset>

<fieldset>
    <legend>差异效果</legend>
    <div id="div5">1111111</div>
    <div id="div6">2211122</div>
</fieldset>

<script src="compare.js"></script>
<script>
    //添加效果
    CompareTxt(null,document.getElementById(\'div2\'));
    //删除效果
    CompareTxt(document.getElementById(\'div3\'),null);
    //差异效果
    CompareTxt(document.getElementById(\'div5\'),document.getElementById(\'div6\'));
</script>
</body>
</html>

 

四、代码下载

https://pan.baidu.com/s/1o8n30MI