代码文本对比-前端工具

代码文本对比

很多时候，我们可能有那种前端代码对比、文本对比的功能

方式一（纯js实现）

1. 效果图

2. 主要html

如果想要在线编辑对比可使用textare标签，并自定义监听函数去对比渲染

   
升级前后对比效果
   

   

3. 主要js

// data.appBefore--变更前数据
const bf = data.appBefore.replace(new RegExp("<", "gm"), "<").replace(new RegExp(">", "gm"), ">");
// data.appAfter--变更后数据
// 这里replace是把数据中的<、>替换成<、> 如果想要pre标签中展示html、xml类型代码数据的话
const af = data.appAfter.replace(new RegExp("<", "gm"), "<").replace(new RegExp(">", "gm"), ">");
const result = _eq({value1: bf || bf, value2: af || af});

// 由于这个对比页面是个弹窗，用到了layui，故此方式渲染数据至html标签中
// result.value1 变更前数据
// result.value2 变更后数据
body.find("#pre").html(result.value1); 
body.find("#pre2").html(result.value2);

// 核心方法
function _eq(op) {
   if(!op){
       return op;
   }
   if(!op.value1_style){
       op.value1_style="background-color:#f9e9e9;text-decoration: line-through;color:red";
   }
   if(!op.value2_style){
       op.value2_style="background-color:#ddeeff;";
   }
   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(/",">");
           ps.v2_new_value += op.value2[ps.v2_i].replace(/",">");
           ps.v1_i += 1;
           ps.v2_i += 1;
           if (ps.v1_i >= op.value1.length) {
               ps.v2_new_value += "" + op.value2.substr(ps.v2_i).replace(/",">") + "";
               break;
           }
           if (ps.v2_i >= op.value2.length) {
               ps.v1_new_value += "" + op.value1.substr(ps.v1_i).replace(/",">") + "";
               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 += "" + op.value1[ps.v1_i].replace(/",">") + "";
               ps.v2_new_value += "" + op.value2[ps.v2_i].replace(/",">") + "";
               ps.v1_i += 1;
               ps.v2_i += 1;

               if (ps.v1_i >= op.value1.length) {
                   ps.v2_new_value += "" + op.value2.substr(ps.v2_i).replace(/",">") + "";
                   break;
               }
               if (ps.v2_i >= op.value2.length) {
                   ps.v1_new_value += "" + op.value1.substr(ps.v1_i).replace(/",">") + "";
                   break;
               }
           } else if (ps.v1_eq_max > ps.v2_eq_max) {
               ps.v1_new_value += "" + op.value1.substr(ps.v1_i, ps.v1_start - ps.v1_i).replace(/",">") + "";
               ps.v1_i = ps.v1_start;
           } else {
               ps.v2_new_value += "" + op.value2.substr(ps.v2_i, ps.v2_start - ps.v2_i).replace(/",">") + "";
               ps.v2_i = ps.v2_start;
           }
       }
   }
   op.value1 = ps.v1_new_value;
   op.value2 = ps.v2_new_value;
   return op;
}

方式二（使用CodeMirror）

效果图

codemirror使用过程

下载项目

github：https://github.com/codemirror/CodeMirror
官网：https://codemirror.net/

打开找到demo html->merge.html

检查是否有codemirror.js

如果没有可以在一个新目录下运行npm install codemirror
把新安装的codemirror工程下的lib的codemirror.js复制过来

打开页面

本地调整后测试的merge.html代码：

  
Compared view


  


  

关于merge.html中参数和函数说明自行查看官网https://codemirror.net/demo/merge.html

集成应用

前面是在源项目中测试，html中js和css都是相对源项目的相对路径

集成在自己项目中，需要改造迁移html、js、css，把这些文件迁过来


html换了个名字compares.html，代码：

    
    
    
    
    
    
    
    
    





    
Compared view
    


    
    
    

    
    
    
    
    

    

这里对比的数据是从后端接口查的，可以一开始写成常量查看效果

上面表示的是主题，想要更多的主题去源码工程迁移过来

diff_match_patch.js可以使用demo中的外部路径，我这里是下载下来了

codeMirror中的js和css文件不要落迁移了
其他问题注意自己看控制台检查