之前項目需求需要寫一個純js文本比較工具，在此小編把代碼分享在VeVb武林網平臺供大家參考，算法有待優化，本文寫的不好還請見諒。
先上效果圖:
代碼如下所示：
把源碼保存為html格式的文件就可以直接運行了
<!doctype html><html><head><title>文本比較工具</title><style type="text/css">*{padding:px;margin:px;}html,body{overflow-y: hidden;}.edit_div{border: px solid #CCCCCC;overflow: auto;position: relative;}.edit_div textarea{resize:none;background: none repeat scroll transparent;border: none;width: %;height:px;overflow-y: scroll;position: absolute;left: px;top: px;z-index: ;font-size: px;white-space: pre-wrap;word-wrap: break-word;word-break:break-all;}.edit_div pre{ overflow-y: scroll;white-space: pre-wrap;word-wrap: break-word;word-break:break-all;width: %;height:px;text-align: left;color: #ffffff;z-index: ;font-size: px;}</style></head><body><table style="width:%"><tr><td style="width:%"><div class="edit_div"><pre id="edit_pre_"></pre><textarea id="edit_textarea_" onscroll="test_scroll()" oninput="textchange()" onpropertychange="textchange()"></textarea></div></td><td style="width:%"><div class="edit_div"><pre id="edit_pre_"></pre><textarea id="edit_textarea_" onscroll="test_scroll()" oninput="textchange()" onpropertychange="textchange()"></textarea></div></td></tr></table><script type="text/javascript">function test_scroll(){document.getElementById("edit_pre_").scrollTop=document.getElementById("edit_textarea_").scrollTop;document.getElementById("edit_pre_").scrollTop=document.getElementById("edit_pre_").scrollTop;document.getElementById("edit_textarea_").scrollTop=document.getElementById("edit_textarea_").scrollTop;}function test_scroll(){document.getElementById("edit_pre_").scrollTop=document.getElementById("edit_textarea_").scrollTop;document.getElementById("edit_pre_").scrollTop=document.getElementById("edit_pre_").scrollTop;document.getElementById("edit_textarea_").scrollTop=document.getElementById("edit_textarea_").scrollTop;}function textchange(){var op = eq({ value: document.getElementById("edit_textarea_").value, value: document.getElementById("edit_textarea_").value });document.getElementById("edit_pre_").innerHTML=op.value+"/r/n";document.getElementById("edit_pre_").innerHTML=op.value+"/r/n";}function eq(op) {if(!op){return op;}if(!op.value_style){op.value_style="background-color:#FECC;";}if(!op.value_style){op.value_style="background-color:#FECC;";}if(!op.eq_min){op.eq_min=;}if(!op.eq_index){op.eq_index=;}if (!op.value || !op.value) {return op;}var ps = {v_i: ,v_new_value: "",v_i: ,v_new_value: ""};while (ps.v_i < op.value.length && ps.v_i < op.value.length) {if (op.value[ps.v_i] == op.value[ps.v_i]) {ps.v_new_value += op.value[ps.v_i].replace(/</g,"<").replace(">",">");ps.v_new_value += op.value[ps.v_i].replace(/</g,"<").replace(">",">");ps.v_i += ;ps.v_i += ;if (ps.v_i >= op.value.length) {ps.v_new_value += "<span style='" + op.value_style + "'>" + op.value.substr(ps.v_i).replace(/</g,"<").replace(">",">") + "</span>";break;}if (ps.v_i >= op.value.length) {ps.v_new_value += "<span style='" + op.value_style + "'>" + op.value.substr(ps.v_i).replace(/</g,"<").replace(">",">") + "</span>";break;}} else {ps.v_index = ps.v_i + ;ps.v_eq_length = ;ps.v_eq_max = ;ps.v_start = ps.v_i + ;while (ps.v_index < op.value.length) {if (op.value[ps.v_index] == op.value[ps.v_i + ps.v_eq_length]) {ps.v_eq_length += ;} else if (ps.v_eq_length > ) {if (ps.v_eq_max < ps.v_eq_length) {ps.v_eq_max = ps.v_eq_length;ps.v_start = ps.v_index - ps.v_eq_length;}ps.v_eq_length = ;break;//只尋找最近的}ps.v_index += ;}if (ps.v_eq_max < ps.v_eq_length) {ps.v_eq_max = ps.v_eq_length;ps.v_start = ps.v_index - ps.v_eq_length;}ps.v_index = ps.v_i + ;ps.v_eq_length = ;ps.v_eq_max = ;ps.v_start = ps.v_i + ;while (ps.v_index < op.value.length) {if (op.value[ps.v_index] == op.value[ps.v_i + ps.v_eq_length]) {ps.v_eq_length += ;} else if (ps.v_eq_length > ) {if (ps.v_eq_max < ps.v_eq_length) {ps.v_eq_max = ps.v_eq_length;ps.v_start = ps.v_index - ps.v_eq_length;}ps.v_eq_length = ;break;//只尋找最近的}ps.v_index += ;}if (ps.v_eq_max < ps.v_eq_length) {ps.v_eq_max = ps.v_eq_length;ps.v_start = ps.v_index - ps.v_eq_length;}if (ps.v_eq_max < op.eq_min && ps.v_start - ps.v_i > op.eq_index) {ps.v_eq_max = ;}if (ps.v_eq_max < op.eq_min && ps.v_start - ps.v_i > op.eq_index) {ps.v_eq_max = ;}if ((ps.v_eq_max == && ps.v_eq_max == )) {ps.v_new_value += "<span style='" + op.value_style + "'>" + op.value[ps.v_i].replace(/</g,"<").replace(">",">") + "</span>";ps.v_new_value += "<span style='" + op.value_style + "'>" + op.value[ps.v_i].replace(/</g,"<").replace(">",">") + "</span>";ps.v_i += ;ps.v_i += ;if (ps.v_i >= op.value.length) {ps.v_new_value += "<span style='" + op.value_style + "'>" + op.value.substr(ps.v_i).replace(/</g,"<").replace(">",">") + "</span>";break;}if (ps.v_i >= op.value.length) {ps.v_new_value += "<span style='" + op.value_style + "'>" + op.value.substr(ps.v_i).replace(/</g,"<").replace(">",">") + "</span>";break;}} else if (ps.v_eq_max > ps.v_eq_max) {ps.v_new_value += "<span style='" + op.value_style + "'>" + op.value.substr(ps.v_i, ps.v_start - ps.v_i).replace(/</g,"<").replace(">",">") + "</span>";ps.v_i = ps.v_start;} else {ps.v_new_value += "<span style='" + op.value_style + "'>" + op.value.substr(ps.v_i, ps.v_start - ps.v_i).replace(/</g,"<").replace(">",">") + "</span>";ps.v_i = ps.v_start;}}}op.value = ps.v_new_value;op.value = ps.v_new_value;return op;}function settextheight(){var heigth=(document.documentElement.clientHeight-)+"px"document.getElementById("edit_pre_").style.height=heigth;document.getElementById("edit_textarea_").style.height=heigth;document.getElementById("edit_pre_").style.height=heigth;document.getElementById("edit_textarea_").style.height=heigth;}window.onload=function(){settextheight();window.onresize=function(){settextheight();}}</script></body></html>以上代碼是使用的純JavaScript代碼實現文本比較工具，希望對大家有所幫助！
新聞熱點
疑難解答
