devbox
神奇cpp
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JS 文本比较_js 文本对比

作者：神奇cpp | 2024-07-07 22:23:57

赞

踩

js 文本对比

 文本比较实现思路：

  1.  把文本内容根据换行符进行分割，转换成texts1、tests2数组
  2.  进行循环对比，当两个数组都循环完毕结束 
    while (index1 < texts1.length || index2 < texts2.length) {}
  3.  进行是否相同判断 
    if (texts1[index1] === texts2[index2]) {
  4. 不相同时，其中一个数组下标循环+1进行比较

 

 实现代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>文本比较</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.             box-sizing: border-box;
  11.         }
  12.  
  13.         .text_content {
  14.             height: 24px;
  15.             font-size: 14px;
  16.             line-height: 24px;
  17.             box-sizing: border-box;
  18.         }
  19.  
  20.         .serial {
  21.             display: flex;
  22.             width: 50px;
  23.         }
  24.  
  25.         .serial .serialNum {
  26.             float: right;
  27.             width: 40px;
  28.         }
  29.  
  30.         .serialNum {
  31.             font-size: 14px;
  32.             text-align: right;
  33.             padding-right: 5px;
  34.             height: 24px;
  35.             line-height: 24px;
  36.         }
  37.  
  38.         .serialLogo {
  39.             font-size: 16px;
  40.             text-align: right;
  41.             height: 24px;
  42.             color: #0000A0;
  43.             font-weight: bold;
  44.             width: 10px;
  45.         }
  46.  
  47.         #details2 .change {
  48.             background-color: #FFFF00;
  49.         }
  50.  
  51.         #details1 .change {
  52.             background-color: #FDD017;
  53.         }
  54.  
  55.         .empty {
  56.             background-color: #C0C0C0;
  57.         }
  58.  
  59.     </style>
  60. </head>
  61. <body style="position: absolute;width: 100%;height: 100%">
  62. <div style="position: absolute;width: 100%;height: 100%">
  63.     <div style="position: absolute;top:10px;bottom:20px;left:0;width: 100%;">
  64.         <div id="data1"
  65.              style="position: absolute;top:0;height: 100%;left: 0;width: 50%;border: 2px silver solid;overflow: scroll">
  66.             <div style="position:fixed;height: 30px;width:  calc(50% - 20px);background-color: #FDD017;border: 2px #ADD8E6 solid;text-align: center;z-index: 1000;line-height: 26px">
  67.                 <span style="font-size: 14px;color: black;">原代码</span>
  68.                 <button onclick="copy(1)"
  69.                         style="font-size: 14px;color: black;float: right; padding:0 5px;margin: 0 10px">复制代码
  70.                 </button>
  71.             </div>
  72.             <div style="min-height: calc(100% - 30px);margin-top: 30px">
  73.                 <div id="serial1" class="serialDiv"
  74.                      style="position: absolute;left: 0;width: 50px;min-height:calc(100% - 30px);background-color: #B6B6B4">
  75.  
  76.                 </div>
  77.                 <div id="details1" style="position: absolute;left: 50px;right: 0;min-height:calc(100% - 30px);">
  78.  
  79.                 </div>
  80.             </div>
  81.         </div>
  82.         <div id="data2"
  83.              style="position: absolute;top:0;height: 100%;left: 50%;width:50% ;border: 2px silver solid;overflow: scroll">
  84.             <div style="position:fixed;height: 30px;width:  calc(50% - 20px);background-color: #FFFF00;border: 2px #ADD8E6 solid;text-align: center;z-index: 1000;line-height: 26px">
  85.                 <span style="font-size: 14px;color: black;">更新代码</span>
  86.                 <button onclick="copy(2)"
  87.                         style="font-size: 14px;color: black;float: right; padding:0 5px;margin: 0 10px">复制代码
  88.                 </button>
  89.             </div>
  90.             <div style="min-height: calc(100% - 30px);margin-top: 30px">
  91.                 <div id="serial2" class="serialDiv"
  92.                      style="position: absolute;left: 0;width: 50px;min-height:calc(100% - 30px);background-color: #B6B6B4">
  93.  
  94.                 </div>
  95.                 <div id="details2" style="position: absolute;left: 50px;right: 0;min-height:calc(100% - 30px);">
  96.  
  97.                 </div>
  98.             </div>
  99.         </div>
  100.     </div>
  101. </div>
  102. <script src="jquery-3.6.0.min.js"></script>
  103. <!--<script src="text1.js"></script>-->
  104. <!--<script src="text2.js"></script>-->
  105. <script>
  106.     let text1="文本1\n文本比较";
  107.     let text2="文本2\n文本比较";
  108.     $(function () {
  109.         let texts1 = text1.split("\n");
  110.         let texts2 = text2.split("\n");
  111.         let details;
  112.         comparison(texts1, texts2);
  113.  
  114.  
  115.         //设置滚动条同步滚动
  116.         $("#data1").mouseover(function () {
  117.             $(this).on("scroll", function () {
  118.                 console.log(1)
  119.                 $("#data2").scrollTop($(this).scrollTop()); // 纵向滚动条
  120.                 $("#data2").scrollLeft($(this).scrollLeft()); // 横向滚动条
  121.             });
  122.             details = document.getElementById("details1");
  123.         }).mouseout(function () {
  124.             $(this).unbind("scroll");
  125.         });
  126.         $("#data2").mouseover(function () {
  127.             $(this).on("scroll", function () {
  128.                 $("#data1").scrollTop($(this).scrollTop()).scrollLeft($(this).scrollLeft());
  129.             });
  130.             details = document.getElementById("details2");
  131.         }).mouseout(function () {
  132.             $(this).unbind("scroll");
  133.         });
  134.  
  135.  
  136.         //设置文本全选
  137.         $("body").keydown(function (event) {
  138.             if (event.ctrlKey && event.which === 65) {
  139.                 let selection = window.getSelection();
  140.                 let range = document.createRange();
  141.                 range.selectNodeContents(details);
  142.                 selection.removeAllRanges();
  143.                 selection.addRange(range);
  144.                 return false;
  145.             }
  146.         });
  147.  
  148.         $(".serialNum").on("click", function () {
  149.             let id = $(this).attr("id");
  150.             let index = id.split("_")[1];
  151.             setBorder(index);
  152.         });
  153.         $(".text_content").on("click", function () {
  154.             let id = $(this).attr("id");
  155.             let index = id.split("_")[1];
  156.             setBorder(index);
  157.         });
  158.     });
  159.  
  160.  
  161.     function setBorder(index) {
  162.         $(".text_content").css("border", "0");
  163.         $(`#text1_${index}`).css({"border-top": "1px black solid", "border-bottom": "1px black solid"});
  164.         $(`#text2_${index}`).css({"border-top": "1px black solid", "border-bottom": "1px black solid"});
  165.     }
  166.  
  167.     //复制
  168.     function copy(type) {
  169.         let text;
  170.         if (type === 1) {
  171.             text = text1;
  172.         } else {
  173.             text = text2;
  174.         }
  175.         let oInput = document.createElement('textarea');
  176.         oInput.value = text;
  177.         document.body.appendChild(oInput);
  178.         oInput.select(); // 选择对象
  179.         document.execCommand("Copy"); // 执行浏览器复制命令
  180.         oInput.className = 'oInput';
  181.         oInput.style.display = 'none';
  182.         alert('复制成功');
  183.     }
  184.  
  185.     //对比
  186.     function comparison(texts1, texts2) {
  187.         let newTexts1 = [];
  188.         let newTexts2 = [];
  189.         let index = 0;
  190.         let index1 = 0;
  191.         let index2 = 0;
  192.         let serial1 = $("#serial1");
  193.         let serial2 = $("#serial2");
  194.         while (index1 < texts1.length || index2 < texts2.length) {
  195.             if (index1 >= texts1.length) {
  196.                 newTexts1.push(`<xmp id="text1_${index}" class="text_content empty"></xmp>`);
  197.                 newTexts2.push(`<xmp id="text2_${index}" class="text_content change">${texts2[index2]}</xmp>`);
  198.                 serial1.append(`<div id="serial1_${index}"  class="serialNum"></div>`);
  199.                 serial2.append(`<div id="serial2_${index}"  class="serialNum">${index2 + 1}</div>`);
  200.                 index2++;
  201.                 index++;
  202.                 continue;
  203.             }
  204.             if (index2 >= texts2.length) {
  205.                 newTexts1.push(`<xmp id="text1_${index}" class="text_content change">${texts1[index1]}</xmp>`);
  206.                 newTexts2.push(`<xmp id="text2_${index}" class="text_content empty"></xmp>`);
  207.                 serial1.append(`<div id="serial1_${index}"  class="serialNum">${index1 + 1}</div>`);
  208.                 serial2.append(`<div id="serial2_${index}"  class="serialNum"></div>`);
  209.                 index++;
  210.                 index1++;
  211.                 index2++;
  212.                 continue;
  213.             }
  214.             //相同
  215.             if (texts1[index1] === texts2[index2]) {
  216.                 newTexts1.push(`<xmp id="text1_${index}" class="text_content equal">${texts1[index1]}</xmp>`);
  217.                 newTexts2.push(`<xmp id="text2_${index}" class="text_content equal">${texts2[index2]}</xmp>`);
  218.                 serial1.append(`<div id="serial1_${index}"  class="serialNum">${index1 + 1}</div>`);
  219.                 serial2.append(`<div id="serial2_${index}"  class="serialNum">${index2 + 1}</div>`);
  220.                 index++;
  221.                 index1++;
  222.                 index2++;
  223.             } else {
  224.                 // 判断texts2有没有
  225.                 let int2 = index2 + 1;
  226.                 let has = false;
  227.                 while (int2 < texts2.length) {
  228.                     if (texts1[index1] === texts2[int2]) {
  229.                         has = true;
  230.                         break;
  231.                     } else {
  232.                         int2++;
  233.                     }
  234.  
  235.                 }
  236.                 if (has) {
  237.                     while (index2 < int2) {
  238.                         newTexts1.push(`<xmp id="text1_${index}" class="text_content empty"></xmp>`);
  239.                         newTexts2.push(`<xmp id="text2_${index}" class="text_content change">${texts2[index2]}</xmp>`);
  240.                         serial1.append(`<div id="serial1_${index}"  class="serialNum"></div>`);
  241.                         serial2.append(`<div class="serial"><div class="serialLogo">+</div><div id="serial2_${index}"  class="serialNum">${index2 + 1}</div></div>`);
  242.                         index2++;
  243.                         index++;
  244.                     }
  245.                     newTexts1.push(`<xmp id="text1_${index}" class="text_content equal">${texts1[index1]}</xmp>`);
  246.                     newTexts2.push(`<xmp id="text2_${index}" class="text_content equal">${texts2[index2]}</xmp>`);
  247.                     serial1.append(`<div id="serial1_${index}"  class="serialNum">${index1 + 1}</div>`);
  248.                     serial2.append(`<div id="serial2_${index}"  class="serialNum">${index2 + 1}</div>`);
  249.                     index1++;
  250.                     index2++;
  251.                     index++;
  252.                 } else {
  253.                     // 判断texts2有没有
  254.                     let int1 = index1 + 1;
  255.                     has = false;
  256.                     while (int1 < texts1.length) {
  257.                         if (texts1[int1] === texts2[index2]) {
  258.                             has = true;
  259.                             break;
  260.                         } else {
  261.                             int1++;
  262.                         }
  263.  
  264.                     }
  265.                     if (has) {
  266.                         while (index1 < int1) {
  267.                             newTexts1.push(`<xmp id="text1_${index}" class="text_content change">${texts1[index1]}</xmp>`);
  268.                             newTexts2.push(`<xmp id="text2_${index}" class="text_content empty"></xmp>`);
  269.                             serial1.append(`<div class="serial"><div class="serialLogo">-</div><div id="serial1_${index}"  class="serialNum">${index1 + 1}</div></div>`);
  270.                             serial2.append(`<div id="serial2_${index}"  class="serialNum"></div>`);
  271.                             index1++;
  272.                             index++;
  273.                         }
  274.                         newTexts1.push(`<xmp id="text1_${index}" class="text_content equal">${texts1[index1]}</xmp>`);
  275.                         newTexts2.push(`<xmp id="text2_${index}" class="text_content equal">${texts2[index2]}</xmp>`);
  276.                         serial1.append(`<div id="serial1_${index}"  class="serialNum">${index1 + 1}</div>`);
  277.                         serial2.append(`<div id="serial2_${index}"  class="serialNum">${index2 + 1}</div>`);
  278.                         index1++;
  279.                         index2++;
  280.                         index++;
  281.                     } else {
  282.                         newTexts1.push(`<xmp id="text1_${index}" class="text_content change">${texts1[index1]}</xmp>`);
  283.                         newTexts2.push(`<xmp id="text2_${index}" class="text_content change">${texts2[index2]}</xmp>`);
  284.                         serial1.append(`<div class="serial"><div class="serialLogo">-</div><div id="serial1_${index}"  class="serialNum">${index1 + 1}</div></div>`);
  285.                         serial2.append(`<div class="serial"><div class="serialLogo">+</div><div id="serial2_${index}"  class="serialNum">${index2 + 1}</div></div>`);
  286.                         index1++;
  287.                         index2++;
  288.                         index++;
  289.                     }
  290.  
  291.                 }
  292.             }
  293.         }
  294.  
  295.  
  296.         $("#details1").append(newTexts1);
  297.         $("#details2").append(newTexts2);
  298.     }
  299.  
  300.  
  301. </script>
  302. </body>
  303. </html>

 备注：只是简单的行比较，可能比较不是很全。可以继续优化，例如：不同行显示修改的是哪个文字

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/796931
推荐阅读