<!doctype html>
<html>
<head>
<title>文本比较工具</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
html,
body {
overflow-y: hidden;
}
.edit_div {
border: 1px solid #CCCCCC;
overflow: auto;
position: relative;
}
.edit_div textarea {
resize: none;
background: none repeat scroll 0 0 transparent;
border: 0 none;
width: 100%;
height: 200px;
overflow-y: scroll;
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
font-size: 18px;
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: 100%;
height: 200px;
text-align: left;
color: #ffffff;
z-index: 1;
font-size: 18px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<td style="width:50%">
<div class="edit_div">
<pre id="edit_pre_1"></pre>
<textarea id="edit_textarea_1" onscroll="test1_scroll()" oninput="textchange()" onpropertychange="textchange()"></textarea>
</div>
</td>
<td style="width:50%">
<div class="edit_div">
<pre id="edit_pre_2"></pre>
<textarea id="edit_textarea_2" onscroll="test2_scroll()" oninput="textchange()" onpropertychange="textchange()"></textarea>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
function test1_scroll() {
document.getElementById("edit_pre_1").scrollTop = document.getElementById("edit_textarea_1").scrollTop;
document.getElementById("edit_pre_2").scrollTop = document.getElementById("edit_pre_1").scrollTop;
document.getElementById("edit_textarea_2").scrollTop = document.getElementById("edit_textarea_1").scrollTop;
}
function test2_scroll() {
document.getElementById("edit_pre_2").scrollTop = document.getElementById("edit_textarea_2").scrollTop;
document.getElementById("edit_pre_1").scrollTop = document.getElementById("edit_pre_2").scrollTop;
document.getElementById("edit_textarea_1").scrollTop = document.getElementById("edit_textarea_2").scrollTop;
}
function textchange() {
var op = eq({
value1: document.getElementById("edit_textarea_1").value,
value2: document.getElementById("edit_textarea_2").value
});
document.getElementById("edit_pre_1").innerHTML = op.value1 + "\r\n";
document.getElementById("edit_pre_2").innerHTML = op.value2 + "\r\n";
}
function eq(op) {
if (!op) {
return op;
}
if (!op.value1_style) {
op.value1_style = "background-color:#FEC8C8;";
}
if (!op.value2_style) {
op.value2_style = "background-color:#FEC8C8;";
}
if (!op.eq_min) {
op.eq_min = 3;
}
if (!op.eq_index) {
op.eq_index = 5;
}
if (!op.value1 || !op.value2) {
return op;
}
var ps = {
v1_i: 0,
v1_new_value: "",
v2_i: 0,
v2_new_value: ""
};
while (ps.v1_i < op.value1.length && ps.v2_i < op.value2.length) {
if (op.value1[ps.v1_i] == op.value2[ps.v2_i]) {
ps.v1_new_value += op.value1[ps.v1_i].replace(/</g, "<").replace(">", ">");
ps.v2_new_value += op.value2[ps.v2_i].replace(/</g, "<").replace(">", ">");
ps.v1_i += 1;
ps.v2_i += 1;
if (ps.v1_i >= op.value1.length) {
ps.v2_new_value += "<span style='" + op.value2_style + "'>" + op.value2.substr(ps.v2_i).replace(/</g, "<").replace(
">", ">") + "</span>";
break;
}
if (ps.v2_i >= op.value2.length) {
ps.v1_new_value += "<span style='" + op.value1_style + "'>" + op.value1.substr(ps.v1_i).replace(/</g, "<").replace(
">", ">") + "</span>";
break;
}
} else {
ps.v1_index = ps.v1_i + 1;
ps.v1_eq_length = 0;
ps.v1_eq_max = 0;
ps.v1_start = ps.v1_i + 1;
while (ps.v1_index < op.value1.length) {
if (op.value1[ps.v1_index] == op.value2[ps.v2_i + ps.v1_eq_length]) {
ps.v1_eq_length += 1;
} else if (ps.v1_eq_length > 0) {
if (ps.v1_eq_max < ps.v1_eq_length) {
ps.v1_eq_max = ps.v1_eq_length;
ps.v1_start = ps.v1_index - ps.v1_eq_length;
}
ps.v1_eq_length = 0;
break; //只寻找最近的
}
ps.v1_index += 1;
}
if (ps.v1_eq_max < ps.v1_eq_length) {
ps.v1_eq_max = ps.v1_eq_length;
ps.v1_start = ps.v1_index - ps.v1_eq_length;
}
ps.v2_index = ps.v2_i + 1;
ps.v2_eq_length = 0;
ps.v2_eq_max = 0;
ps.v2_start = ps.v2_i + 1;
while (ps.v2_index < op.value2.length) {
if (op.value2[ps.v2_index] == op.value1[ps.v1_i + ps.v2_eq_length]) {
ps.v2_eq_length += 1;
} else if (ps.v2_eq_length > 0) {
if (ps.v2_eq_max < ps.v2_eq_length) {
ps.v2_eq_max = ps.v2_eq_length;
ps.v2_start = ps.v2_index - ps.v2_eq_length;
}
ps.v1_eq_length = 0;
break; //只寻找最近的
}
ps.v2_index += 1;
}
if (ps.v2_eq_max < ps.v2_eq_length) {
ps.v2_eq_max = ps.v2_eq_length;
ps.v2_start = ps.v2_index - ps.v2_eq_length;
}
if (ps.v1_eq_max < op.eq_min && ps.v1_start - ps.v1_i > op.eq_index) {
ps.v1_eq_max = 0;
}
if (ps.v2_eq_max < op.eq_min && ps.v2_start - ps.v2_i > op.eq_index) {
ps.v2_eq_max = 0;
}
if ((ps.v1_eq_max == 0 && ps.v2_eq_max == 0)) {
ps.v1_new_value += "<span style='" + op.value1_style + "'>" + op.value1[ps.v1_i].replace(/</g, "<").replace(">",
">") + "</span>";
ps.v2_new_value += "<span style='" + op.value2_style + "'>" + op.value2[ps.v2_i].replace(/</g, "<").replace(">",
">") + "</span>";
ps.v1_i += 1;
ps.v2_i += 1;
if (ps.v1_i >= op.value1.length) {
ps.v2_new_value += "<span style='" + op.value2_style + "'>" + op.value2.substr(ps.v2_i).replace(/</g, "<").replace(
">", ">") + "</span>";
break;
}
if (ps.v2_i >= op.value2.length) {
ps.v1_new_value += "<span style='" + op.value1_style + "'>" + op.value1.substr(ps.v1_i).replace(/</g, "<").replace(
">", ">") + "</span>";
break;
}
} else if (ps.v1_eq_max > ps.v2_eq_max) {
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>";
ps.v1_i = ps.v1_start;
} else {
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>";
ps.v2_i = ps.v2_start;
}
}
}
op.value1 = ps.v1_new_value;
op.value2 = ps.v2_new_value;
return op;
}
function settextheight() {
var heigth = (document.documentElement.clientHeight - 6) + "px"
document.getElementById("edit_pre_1").style.height = heigth;
document.getElementById("edit_textarea_1").style.height = heigth;
document.getElementById("edit_pre_2").style.height = heigth;
document.getElementById("edit_textarea_2").style.height = heigth;
}
window.onload = function () {
settextheight();
window.onresize = function () {
settextheight();
}
}
</script>
</body>
</html>
【转】纯JavaScript实现文本对比
最新推荐文章于 2024-07-18 16:54:04 发布