以前，项目需求需要编写纯js文本比较工具。 在这里，编辑们在脚本家的平台上分享代码作为参考。 算法需要优化。 正文写得不好，敬请谅解。
先效图：
代码如下。
只要将源代码保存为html格式的文件，就可以直接执行
文本比较工具
html，body{
overflow-y :隐藏；
}
. edit_div{
border: px solid #CCCCCC；
Overflow :自动；
position: relative；
}
. edit_div textarea{
resize :无；
后台： nonerepeatscrolltransparent；
border :否；
width: %；
高： px；
overflow-y: scroll；
位置： absolute；
left: px；
top: px；
z-index:
font-size: px；
white-space :预失真；
魔兽世界： break-word；
魔兽世界： break-all；
}
. edit_div pre{
overflow-y: scroll；
white-space :预失真；
魔兽世界： break-word；
魔兽世界： break-all；
width: %；
高： px；
文本对齐：左对齐；
color: #ffffff；
z-index:
font-size: px；
}
function test_scroll
document.getelementbyid (edit _ pre _ ' ).scroll top=document.getelementbyid (edit _ textarea _ ' ).scrolltententbyid
document.getelementbyid (edit _ pre _ ' ).scrolltop=document.getelementbyid (edit _ pre _ ' ).scroll top；
document.getelementbyid (edit _ textarea _ ' ).scroll top=document.getelementbyid (edit _ textarea _ ' ).SCC u u u mmid
}
function test_scroll
document.getelementbyid (edit _ pre _ ' ).scroll top=document.getelementbyid (edit _ textarea _ ' ).scrolltententbyid
document.getelementbyid (edit _ pre _ ' ).scrolltop=document.getelementbyid (edit _ pre _ ' ).scroll top；
document.getelementbyid (edit _ textarea _ ' ).scroll top=document.getelementbyid (edit _ textarea _ ' ).SCC u u u mmid
}
功能文本更改
varop=eq (value : document.getelementbyid (edit _ textarea _ ' ).value，value : document.getelementbyid ) )
document.getelementbyid (edit _ pre _ ).innerHTML=op.value 'rn '；
document.getelementbyid (edit _ pre _ ).innerHTML=op.value 'rn '；
}
函数eq (op ) {
if (！ op}{
返回操作；
}
if (！ op.value_style ) {
op.value _ style=' background-color : # fecc；' ；
}
if (！ op.value_style ) {
op.value _ style=' background-color : # fecc；' ；
}
if (！ op.eq_m
in){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(/",">");
ps.v_new_value += op.value[ps.v_i].replace(/",">");
ps.v_i += ;
ps.v_i += ;
if (ps.v_i >= op.value.length) {
ps.v_new_value += "" + op.value.substr(ps.v_i).replace(/",">") + "";
break;
}
if (ps.v_i >= op.value.length) {
ps.v_new_value += "" + op.value.substr(ps.v_i).replace(/",">") + "";
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 += "" + op.value[ps.v_i].replace(/",">") + "";
ps.v_new_value += "" + op.value[ps.v_i].replace(/",">") + "";
ps.v_i += ;
ps.v_i += ;
if (ps.v_i >= op.value.length) {
ps.v_new_value += "" + op.value.substr(ps.v_i).replace(/",">") + "";
break;
}
if (ps.v_i >= op.value.length) {
ps.v_new_value += "" + op.value.substr(ps.v_i).replace(/",">") + "";
break;
}
} else if (ps.v_eq_max > ps.v_eq_max) {
ps.v_new_value += "" + op.value.substr(ps.v_i, ps.v_start - ps.v_i).replace(/",">") + "";
ps.v_i = ps.v_start;
} else {
ps.v_new_value += "" + op.value.substr(ps.v_i, ps.v_start - ps.v_i).replace(/",">") + "";
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.οnlοad=function(){
settextheight();
window.οnresize=function(){
settextheight();
}
}
以上代码是使用的纯JavaScript代码实现文本比较工具，希望对大家有所帮助！