前段时间由于工作需要写了一个纯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,"<").replace(">",">");106 ps.v2_new_value += op.value2[ps.v2_i].replace(/</g,"<").replace(">",">");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,"<").replace(">",">") + "</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,"<").replace(">",">") + "</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,"<").replace(">",">") + "</span>";169 ps.v2_new_value += "<span style='" + op.value2_style + "'>" + op.value2[ps.v2_i].replace(/</g,"<").replace(">",">") + "</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,"<").replace(">",">") + "</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,"<").replace(">",">") + "</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,"<").replace(">",">") + "</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,"<").replace(">",">") + "</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文本比较工具
关键词:JS