前段时间由于工作需要写了一个纯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文本比较工具源码
时间： 2024-08-05 19:36:26