前段时间由于工作需要写了一个纯JS文本比较工具

在这里与大家分享下

算法有待优化,还希望大家多多指教

先上效果图:

奉上源码(把源码保存为html格式的文件就可以直接运行了):

  1.  <!doctype html>
  2.  <html>
  3.      <head>
  4.          <title>文本比较工具</title>
  5.          <style type="text/css">
  6.              *{padding:0px;margin:0px;}
  7.              html,body{
  8.                  overflow-y: hidden;
  9.              }
  10.              .edit_div{
  11.                  border: 1px solid #CCCCCC;
  12.                  overflow: auto;
  13.                  position: relative;
  14.              }
  15.              .edit_div textarea{
  16.                  resize:none;
  17.                  background: none repeat scroll 0 0 transparent;
  18.                  border: 0 none;
  19.                  width: 100%;
  20.                  height:200px;
  21.                  overflow-y: scroll;
  22.                  position: absolute;
  23.                  left: 0px;
  24.                  top: 0px;
  25.                  z-index: 2;
  26.                  font-size: 18px;
  27.                  white-space: pre-wrap;
  28.                  word-wrap: break-word;
  29.                  word-break:break-all;
  30.              }
  31.              .edit_div pre{
  32.                  overflow-y: scroll;
  33.                  white-space: pre-wrap;
  34.                  word-wrap: break-word;
  35.                  word-break:break-all;
  36.                  width: 100%;
  37.                  height:200px;
  38.                  text-align: left;
  39.                  color: #ffffff;
  40.                  z-index: 1;
  41.                  font-size: 18px;
  42.              }
  43.      </style>
  44.      </head>
  45.      <body>
  46.          <table style="width:100%">
  47.              <tr>
  48.                  <td style="width:50%">
  49.                      <div class="edit_div">
  50.                          <pre id="edit_pre_1"></pre>
  51.                          <textarea id="edit_textarea_1" onscroll="test1_scroll()" oninput="textchange()" onpropertychange="textchange()"></textarea>
  52.                      </div>
  53.                  </td>
  54.                  <td style="width:50%">
  55.                      <div class="edit_div">
  56.                          <pre  id="edit_pre_2"></pre>
  57.                          <textarea id="edit_textarea_2" onscroll="test2_scroll()" oninput="textchange()" onpropertychange="textchange()"></textarea>
  58.                      </div>
  59.                  </td>
  60.              </tr>
  61.          </table>
  62.          <script type="text/javascript">
  63.              function test1_scroll(){
  64.                  document.getElementById("edit_pre_1").scrollTop=document.getElementById("edit_textarea_1").scrollTop;
  65.                  document.getElementById("edit_pre_2").scrollTop=document.getElementById("edit_pre_1").scrollTop;
  66.                  document.getElementById("edit_textarea_2").scrollTop=document.getElementById("edit_textarea_1").scrollTop;
  67.              }
  68.              function test2_scroll(){
  69.                  document.getElementById("edit_pre_2").scrollTop=document.getElementById("edit_textarea_2").scrollTop;
  70.                  document.getElementById("edit_pre_1").scrollTop=document.getElementById("edit_pre_2").scrollTop;
  71.                  document.getElementById("edit_textarea_1").scrollTop=document.getElementById("edit_textarea_2").scrollTop;
  72.              }
  73.              function textchange(){
  74.                      var op = eq({ value1: document.getElementById("edit_textarea_1").value, value2: document.getElementById("edit_textarea_2").value });
  75.                      document.getElementById("edit_pre_1").innerHTML=op.value1+"\r\n";
  76.                      document.getElementById("edit_pre_2").innerHTML=op.value2+"\r\n";
  77.              }
  78.              function eq(op) {
  79.                  if(!op){
  80.                      return op;
  81.                  }
  82.                  if(!op.value1_style){
  83.                      op.value1_style="background-color:#FEC8C8;";
  84.                  }
  85.                  if(!op.value2_style){
  86.                      op.value2_style="background-color:#FEC8C8;";
  87.                  }
  88.                  if(!op.eq_min){
  89.                      op.eq_min=3;
  90.                  }
  91.                  if(!op.eq_index){
  92.                      op.eq_index=5;
  93.                  }
  94.                  if (!op.value1 || !op.value2) {
  95.                      return op;
  96.                  }
  97.                  var ps = {
  98.                      v1_i: 0,
  99.                      v1_new_value: "",
  100.                      v2_i: 0,
  101.                      v2_new_value: ""
  102.                  };
  103.                  while (ps.v1_i < op.value1.length && ps.v2_i < op.value2.length) {
  104.                      if (op.value1[ps.v1_i] == op.value2[ps.v2_i]) {
  105.                          ps.v1_new_value += op.value1[ps.v1_i].replace(/</g,"&lt;").replace(">","&gt;");
  106.                          ps.v2_new_value += op.value2[ps.v2_i].replace(/</g,"&lt;").replace(">","&gt;");
  107.                          ps.v1_i += 1;
  108.                          ps.v2_i += 1;
  109.                          if (ps.v1_i >= op.value1.length) {
  110.                              ps.v2_new_value += "<span style='" + op.value2_style + "'>" + op.value2.substr(ps.v2_i).replace(/</g,"&lt;").replace(">","&gt;") + "</span>";
  111.                              break;
  112.                          }
  113.                          if (ps.v2_i >= op.value2.length) {
  114.                              ps.v1_new_value += "<span style='" + op.value1_style + "'>" + op.value1.substr(ps.v1_i).replace(/</g,"&lt;").replace(">","&gt;") + "</span>";
  115.                              break;
  116.                          }
  117.                      } else {
  118.                          ps.v1_index = ps.v1_i + 1;
  119.                          ps.v1_eq_length = 0;
  120.                          ps.v1_eq_max = 0;
  121.                          ps.v1_start = ps.v1_i + 1;
  122.                          while (ps.v1_index < op.value1.length) {
  123.                              if (op.value1[ps.v1_index] == op.value2[ps.v2_i + ps.v1_eq_length]) {
  124.                                  ps.v1_eq_length += 1;
  125.                              } else if (ps.v1_eq_length > 0) {
  126.                                  if (ps.v1_eq_max < ps.v1_eq_length) {
  127.                                      ps.v1_eq_max = ps.v1_eq_length;
  128.                                      ps.v1_start = ps.v1_index - ps.v1_eq_length;
  129.                                  }
  130.                                  ps.v1_eq_length = 0;
  131.                                  break;//只寻找最近的
  132.                              }
  133.                              ps.v1_index += 1;
  134.                          }
  135.                          if (ps.v1_eq_max < ps.v1_eq_length) {
  136.                              ps.v1_eq_max = ps.v1_eq_length;
  137.                              ps.v1_start = ps.v1_index - ps.v1_eq_length;
  138.                          }
  139.  
  140.                          ps.v2_index = ps.v2_i + 1;
  141.                          ps.v2_eq_length = 0;
  142.                          ps.v2_eq_max = 0;
  143.                          ps.v2_start = ps.v2_i + 1;
  144.                          while (ps.v2_index < op.value2.length) {
  145.                              if (op.value2[ps.v2_index] == op.value1[ps.v1_i + ps.v2_eq_length]) {
  146.                                  ps.v2_eq_length += 1;
  147.                              } else if (ps.v2_eq_length > 0) {
  148.                                  if (ps.v2_eq_max < ps.v2_eq_length) {
  149.                                      ps.v2_eq_max = ps.v2_eq_length;
  150.                                      ps.v2_start = ps.v2_index - ps.v2_eq_length;
  151.                                  }
  152.                                  ps.v1_eq_length = 0;
  153.                                  break;//只寻找最近的
  154.                              }
  155.                              ps.v2_index += 1;
  156.                          }
  157.                          if (ps.v2_eq_max < ps.v2_eq_length) {
  158.                              ps.v2_eq_max = ps.v2_eq_length;
  159.                              ps.v2_start = ps.v2_index - ps.v2_eq_length;
  160.                          }
  161.                          if (ps.v1_eq_max < op.eq_min && ps.v1_start - ps.v1_i > op.eq_index) {
  162.                              ps.v1_eq_max = 0;
  163.                          }
  164.                          if (ps.v2_eq_max < op.eq_min && ps.v2_start - ps.v2_i > op.eq_index) {
  165.                              ps.v2_eq_max = 0;
  166.                          }
  167.                          if ((ps.v1_eq_max == 0 && ps.v2_eq_max == 0)) {
  168.                              ps.v1_new_value += "<span style='" + op.value1_style + "'>" + op.value1[ps.v1_i].replace(/</g,"&lt;").replace(">","&gt;") + "</span>";
  169.                              ps.v2_new_value += "<span style='" + op.value2_style + "'>" + op.value2[ps.v2_i].replace(/</g,"&lt;").replace(">","&gt;") + "</span>";
  170.                              ps.v1_i += 1;
  171.                              ps.v2_i += 1;
  172.  
  173.                              if (ps.v1_i >= op.value1.length) {
  174.                                  ps.v2_new_value += "<span style='" + op.value2_style + "'>" + op.value2.substr(ps.v2_i).replace(/</g,"&lt;").replace(">","&gt;") + "</span>";
  175.                                  break;
  176.                              }
  177.                              if (ps.v2_i >= op.value2.length) {
  178.                                  ps.v1_new_value += "<span style='" + op.value1_style + "'>" + op.value1.substr(ps.v1_i).replace(/</g,"&lt;").replace(">","&gt;") + "</span>";
  179.                                  break;
  180.                              }
  181.                          } else if (ps.v1_eq_max > ps.v2_eq_max) {
  182.                              ps.v1_new_value += "<span style='" + op.value1_style + "'>" + op.value1.substr(ps.v1_i, ps.v1_start - ps.v1_i).replace(/</g,"&lt;").replace(">","&gt;") + "</span>";
  183.                              ps.v1_i = ps.v1_start;
  184.                          } else {
  185.                              ps.v2_new_value += "<span style='" + op.value2_style + "'>" + op.value2.substr(ps.v2_i, ps.v2_start - ps.v2_i).replace(/</g,"&lt;").replace(">","&gt;") + "</span>";
  186.                              ps.v2_i = ps.v2_start;
  187.                          }
  188.                      }
  189.                  }
  190.                  op.value1 = ps.v1_new_value;
  191.                  op.value2 = ps.v2_new_value;
  192.                  return op;
  193.              }
  194.              function settextheight(){
  195.                  var heigth=(document.documentElement.clientHeight-6)+"px"
  196.                  document.getElementById("edit_pre_1").style.height=heigth;
  197.                  document.getElementById("edit_textarea_1").style.height=heigth;
  198.                  document.getElementById("edit_pre_2").style.height=heigth;
  199.                  document.getElementById("edit_textarea_2").style.height=heigth;
  200.              }
  201.              window.onload=function(){
  202.                  settextheight();
  203.                  window.onresize=function(){
  204.                      settextheight();
  205.                  }
  206.              }
  207.          </script>
  208.      </body>
  209.  </html>

纯JS文本比较工具源码

纯JS文本比较工具的更多相关文章

  1. 我用的一些Node.js开发工具、开发包、框架等总结

    开发工具 1.WebStorm,毫无疑问非他莫属,跨平台,强大的代码提示,支持Nodejs调试,此外还支持vi编辑模式,这点我很喜欢. 2.做些小型项目用Sublime Text. 3.Browser ...

  2. 纯js客服插件集qq、旺旺、skype、百度hi、msn

    原文 纯js客服插件集qq.旺旺.skype.百度hi.msn 客服插件,集qq.旺旺.skype.百度hi.msn 等 即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨.我的博客 h ...

  3. 在线压缩JS的工具

    给大家介绍款在线压缩JS的工具 首先说下该工具的域名:http://javascriptcompressor.com/ 进入后界面如下: 具体要讲下它的功能点:在线压缩 Javascript 源码可以 ...

  4. 纯js实现html转pdf

    项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式.简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf.咋不上天呢--查了一下 ...

  5. Node.js开发工具、开发包、框架等总结

    开发工具 1.WebStorm,毫无疑问非他莫属,跨平台,强大的代码提示,支持Nodejs调试,此外还支持vi编辑模式,这点我很喜欢.2.做些小型项目用Sublime Text.3.Browserif ...

  6. Ajax，纯Js+Jquery

    AJAX:Asynchronous Javascript and xml 异步,Js和Xml 交互式网页开发 不刷新页面,与服务器交互 详情请参照Jquery工具指南用在浏览器端的技术,无刷新,通过X ...

  7. 纯JS实现KeyboardNav(学习笔记)二

    纯JS实现KeyboardNav(学习笔记)二 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码 ...

  8. js常用工具类.

    一些js的工具类 复制代码 /** * Created by sevennight on 15-1-31. * js常用工具类 */ /** * 方法作用:[格式化时间] * 使用方法 * 示例: * ...

  9. 纯JS实现俄罗斯方块，打造属于你的游戏帝国

    纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...

随机推荐

  1. AngularJs指令（一）

    AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用 ...

  2. hdu 4081 最小生成树+树形dp

    思路:直接先求一下最小生成树,然后用树形dp来求最优值.也就是两遍dfs. #include<iostream> #include<algorithm> #include< ...

  3. Table of Contents - MongoDB

    Getting Started Installation Installing MongoDB on Windows Installing MongoDB on Linux Introduction ...

  4. C# 简单邮件群发通用类

    public static class Email { /// <summary> /// 发件人 /// </summary> public static string ma ...

  5. IIS Session问题解决

    Windows Server 2008 +IIS +ASP.net +SQLServer2008搭建的内部WEB系统. 发现用户Session总是不知不觉就自行遗失,原因就是 IIS的不稳定性将导致S ...

  6. MySQL配置管理

    数据库的链接: 获取项目结果集和链接: package Dao; import java.sql.Connection; import java.sql.ResultSet; import java. ...

  7. powershell查看pc信息的常用命令

    Ps:powershell功能十分强大,这里只是简单说明一些比较常用的 get-wmiobject(获取对象) 查看本机的BIOS信息 1.         使用命令:get-wmiobject Wi ...

  8. 虚拟机中Linux安装Tools

    1. 插入光盘后将文件拷贝到常用放置软件的目录 2. 解压文件 3. 然后进入解压后的文件夹里找到安装文件进行安装(注意使用root权限安装) 4. 安装时也是一个交互的过程 5. 完成安装

  9. PHP的final、抽象类和方法

    final关键字的用法 final class Computer{ //无法继承的类 final public function run(){ //无法继承的方法 } } class NoteBook ...

  10. OpenGL第12-14讲小结

    首先要为自己为什么没有写第10讲的控制3D场景和第11讲的红旗飘飘呢?因为没看啊~哈哈哈,而且我尝试着运行红旗飘飘的时候电脑蓝屏了(可能不是它的锅),暂时跳过了. 恩,12到14主要了解了这么些东西, ...