|
|
@@ -1,276 +0,0 @@
|
|
|
-<!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>
|
visuddhinanda