自联网文档对比网页技术分享，纯HTML

<!DOCTYPE html>

<html class="eye-protector-processed" style="background-color: rgb(193, 230, 198);"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>自联文本对比</title>
<meta name="description" content="本工具可以方便大家快速对比两个文本/代码中的不同之处。">
<meta name="keywords" content="在线对比,比较,对比工具,比较工具,文本对比,代码对比,差异检测,diffuse">
<script src="./自联文本对比网页_files/hm.js"></script><script src="./自联文本对比网页_files/jquery-1.10.2.js"></script><script src="./自联文本对比网页_files/jquery.min.js"></script>
<style type="text/css">
body{background-color:#F4F4F4;color:#191919;padding-left:30px}.fl b{color:#2E2E2E;font-weight:bold;font-size:26px;}.m,.m2{width:95%;margin-left:auto;margin-right:auto;}.m2{width:55%;font-size:14px;color:#808080;}.fl{width:48%;float:left;margin-left:1%;margin-right:1%;}.fl textarea{width:100%;height:400px;padding:10px;outline:none;border:0px;transition:1s;border:1px solid #DDDDDD;-moz-box-shadow:2px 2px 4px #f5f5f5 inset;-webkit-box-shadow:2px 2px 4px #f5f5f5 inset;box-shadow:2px 2px 4px #f5f5f5 inset;padding:10px;}textarea:focus{outline:none !important;background-color:#fafbf5;border:1px solid #4ca957;-moz-box-shadow:2px 2px 4px #e8e9e4 inset;-webkit-box-shadow:2px 2px 4px #e8e9e4 inset;box-shadow:2px 2px 4px #e8e9e4 inset;}textarea::-webkit-input-placeholder{color:#A4A4A4;}textarea::-moz-placeholder{color:#A4A4A4;}textarea:-moz-placeholder{color:#A4A4A4;}textarea:-ms-input-placeholder{color:#A4A4A4;}.btn-primary{color:#fff;background-color:#3ab143;border-color:#399c3f;}.GuoLvCbtn{text-align:center}.GuoLvCbtn input{color:#fff;background-color:#5cb85c;border-color:#4cae4c;width:300px;height:40px;margin-left:10px;margin-top:20px;margin-right:10px;border-width:0px;border-radius:5px;cursor:pointer;}.GuoLvCbtn input:hover{background-color:#1D7B1D}.pt10{margin-top:10px}.hljs-line-numbers{text-align:right;border-right:1px solid #ccc;color:#999;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}h2 a{
padding-left: 10px;
padding-right: 10px;
text-decoration: underline;
color: #222222;
}.left{float:left;width:50%;}.right{float:right;width:49%;}.scroll{height:600px;overflow-x:scroll;overflow-y:auto;}.inserted{background-color:#9E9;min-width:100%;display:inline-block;}.deleted{background-color:#E99;min-width:100%;display:inline-block;}.modified{min-width:100%;display:inline-block;background-color:#f9f5f3;}.modified-light{background-color:#fbff00;display:inline-block;color:#f00;padding-left:3px;padding-right:3px;border-radius:5px;border:1px solid #ef6063;}.padding{background-color:lightgray;min-width:100%;display:inline-block;}.ie{_position:absolute;_clear:both;_top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ? documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight) - 1:document.body.scrollTop+(document.body.clientHeight-this.clientHeight) - 1);}.hljs{white-space:pre-wrap;font-weight:200;display:block;overflow-x:auto;padding:0.5em;background:white;}.hljs-comment,.hljs-quote,.hljs-variable{color:#008000}.hljs-keyword,.hljs-selector-tag,.hljs-built_in,.hljs-name,.hljs-tag{color:#00f}.hljs-string,.hljs-title,.hljs-section,.hljs-attribute,.hljs-literal,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-addition{color:#a31515}.hljs-deletion,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-meta{color:#2b91af}.hljs-doctag{color:#808080}.hljs-attr{color:#f00}.hljs-symbol,.hljs-bullet,.hljs-link{color:#00b0e8}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
</style>
</head>
<body class="eye-protector-processed" style="background-color: rgb(193, 230, 198); transition: background-color 0.3s ease 0s;">
<script>
'use strict';

if (!('bind' in Function.prototype)) {
Function.prototype.bind = function (owner) {
var that = this;
if (arguments.length <= 1) {
return function () {
return that.apply(owner, arguments);
};
} else {
var args = Array.prototype.slice.call(arguments, 1);
return function () {
return that.apply(owner, arguments.length === 0 ? args : args.concat(Array.prototype.slice.call(arguments)));
};
}
};
}

if (!('trim' in String.prototype)) {
String.prototype.trim = function () {
return this.replace(/^\s+/, '').replace(/\s+$/, '');
};
}

if (!('trimLeft' in String.prototype)) {
String.prototype.trimLeft = function () {
return this.replace(/^\s+/, '');
};
}

if (!('trimRight' in String.prototype)) {
String.prototype.trimRight = function () {
return this.replace(/\s+$/, '');
};
}

if (!('indexOf' in Array.prototype)) {
Array.prototype.indexOf = function (find, i /*opt*/) {
if (i === undefined) i = 0;
if (i < 0) i += this.length;
if (i < 0) i = 0;
for (var n = this.length; i < n; i++)
if (i in this && this[i] === find)
return i;
return -1;
};
}
if (!('lastIndexOf' in Array.prototype)) {
Array.prototype.lastIndexOf = function (find, i /*opt*/) {
if (i === undefined) i = this.length - 1;
if (i < 0) i += this.length;
if (i > this.length - 1) i = this.length - 1;
for (i++; i-- > 0; ) /* i++ because from-argument is sadly inclusive */
if (i in this && this[i] === find)
return i;
return -1;
};
}
if (!('forEach' in Array.prototype)) {
Array.prototype.forEach = function (action, that /*opt*/) {
for (var i = 0, n = this.length; i < n; i++)
if (i in this)
action.call(that, this[i], i, this);
};
}
if (!('map' in Array.prototype)) {
Array.prototype.map = function (mapper, that /*opt*/) {
var other = new Array(this.length);
for (var i = 0, n = this.length; i < n; i++)
if (i in this)
other[i] = mapper.call(that, this[i], i, this);
return other;
};
}
if (!('filter' in Array.prototype)) {
Array.prototype.filter = function (filter, that /*opt*/) {
var other = [], v;
for (var i = 0, n = this.length; i < n; i++)
if (i in this && filter.call(that, v = this[i], i, this))
other.push(v);
return other;
};
}
if (!('every' in Array.prototype)) {
Array.prototype.every = function (tester, that /*opt*/) {
for (var i = 0, n = this.length; i < n; i++)
if (i in this && !tester.call(that, this[i], i, this))
return false;
return true;
};
}
if (!('some' in Array.prototype)) {
Array.prototype.some = function (tester, that /*opt*/) {
for (var i = 0, n = this.length; i < n; i++)
if (i in this && tester.call(that, this[i], i, this))
return true;
return false;
};
}
</script>
<style>

</style>
<div class="m">
<div class="m2">
<h2 style="text-align: center"> <a href="https://www.zilianw.com/">中文文本对比工具</a></h2>
<p>自联在线中文文本对比工具是一款免费的在线文本对比工具，可以自动对两段文本进行对比，检测/比较两个文本之间不同的差异，此工具可以对中文文章内容进行对比，帮您快速找到文本内容的差异之处。</p>
</div>
<div class="wwlr auto">

$('#diffuse').on("click", function () {
if ($('#original').val() == '' || $('#edited').val() == '') {
alert('文本不可为空，请重新输入');
return;
}
$('#original_result code,#edited_result code').html('<img src="load.gif">');
setTimeout(function () { doDiff(); }, 500);
});

$('#clear').on('click', function () {
clear();
});

})
function clear() {
$('#original,#edited').val('');
$('#original_result code,#edited_result code').html('');
$('#original_result code:eq(0),#edited_result code:eq(0)').remove();
$('#prevv').remove();
$('html,body').animate({ scrollTop: 0 }, 1);
}
function doDiff() {

var diff = new SourceDiff.Diff(true);
var formatter = new SourceDiff.DiffFormatter(diff);

var text1 = $('#original').val();
var text2 = $('#edited').val();

var chag = 0, add = 0, del = 0;
var results = formatter.formattedDiff(text1, text2);

var adds = results[3].added.all();
var dels = results[3].deleted.all();
var cha = arrayIntersection(adds, dels);

$(".hljs-line-numbers").remove();
$('#original_result code').html(results[0]);
$('#edited_result code').html(results[1]);

var pre = $('pre code');
for (var i = 0; i < pre.length; i++) {
hljs.highlightBlock(pre[i]);
}

var _line = 0;
$('pre code').each(function () {
var lines = $(this).html().split('<br>').length - 1;
_line = lines;
$(this).before('<code class="hljs hljs-line-numbers" style="float: left;"></code>');
var html = $(this).prev('.hljs-line-numbers');
for (i = 1; i <= lines; i++) {
if (i == lines)
html.html(html.html() + (i + '.'));
else
html.html(html.html() + (i + '.<br>'));
}
});

$('#prevv').remove();

var pos = $("#txtcontents").position();

$('#total strong:eq(0)').html(cha.length);
$('#total strong:eq(1)').html(adds.length - cha.length);
$('#total strong:eq(2)').html(dels.length - cha.length);
var scrollTag = true;
var _h = $('#edited_result code').height();
$('#prevv').show();
var acha = arrayIntersect(adds, cha);
var dcha = arrayIntersect(dels, cha);
if (acha.length != 0) {
for (var i = 0; i < acha.length; i++) {
$('#prevv').append('<div style="position: absolute;width: 100%;height: 2px;background-color: #9E9;top: ' + parseInt(acha[i] / _line * 100) + '%;"></div>')
}
}
if (cha.length != 0) {
for (var i = 0; i < cha.length; i++) {
$('#prevv').append('<div style="position: absolute;width: 100%;height: 2px;background-color: #FD8;top: ' + parseInt(cha[i] / _line * 100) + '%;"></div>')
}
}
if (dels.length != 0) {
for (var i = 0; i < dcha.length; i++) {
$('#prevv').append('<div style="position: absolute;width: 100%;height: 2px;background-color: #E99;top: ' + parseInt(dcha[i] / _line * 100) + '%;"></div>')
}
}

$(window).off('resize').resize(function () {
var pos = $("#txtcontents").position();
$('#prevv').css('top', pos.top + 'px').css('left', pos.left + $("#txtcontents").width() + 20 + 'px');
});

$(window).off('scroll').scroll(function () {
if (scrollTag) {
if ($(window).scrollTop() > $('#edited_result code').offset().top) {
$('#_scrollblock').css('top', ($(window).scrollTop() - $('#edited_result code').offset().top) / $('#edited_result code').height() * 100 + '%');
if ($('#_scrollblock').position().top >= 260) {
$('#_scrollblock').css('top', '260px');
}
} else {
$('#_scrollblock').css('top', '0px');
}
}
});

var scrollLeft = $('#original_result code:eq(1)');
var scrollRight = $('#edited_result code:eq(1)');

function arrayIntersection(a, b) {
var ai = 0, bi = 0;
var result = new Array();

while (ai < a.length && bi < b.length) {
if (a[ai] < b[bi]) { ai++; }
else if (a[ai] > b[bi]) { bi++; }
else /* they're equal */
{
result.push(a[ai]);
ai++;
bi++;
}
}

return result;
}
function arrayIntersect(a, b) {
return jQuery.merge(jQuery.grep(a, function (i) {
return jQuery.inArray(i, b) == -1;
}), jQuery.grep(b, function (i) {
return jQuery.inArray(i, a) == -1;
})
);
};

</script>
<input id="enabled" type="hidden" value="1">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?b3a3fc356d0af38b811a0ef8d50716b8";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>

</b></b><div id="fatkun-drop-panel">
<a id="fatkun-drop-panel-close-btn">×</a>
<div id="fatkun-drop-panel-inner">
<div class="fatkun-content">
<svg class="fatkun-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5892"><path d="M494.933333 782.933333c2.133333 2.133333 4.266667 4.266667 8.533334 6.4h8.533333c6.4 0 10.666667-2.133333 14.933333-6.4l2.133334-2.133333 275.2-275.2c8.533333-8.533333 8.533333-21.333333 0-29.866667-8.533333-8.533333-21.333333-8.533333-29.866667 0L533.333333 716.8V128c0-12.8-8.533333-21.333333-21.333333-21.333333s-21.333333 8.533333-21.333333 21.333333v588.8L249.6 475.733333c-8.533333-8.533333-21.333333-8.533333-29.866667 0-8.533333 8.533333-8.533333 21.333333 0 29.866667l275.2 277.333333zM853.333333 874.666667H172.8c-12.8 0-21.333333 8.533333-21.333333 21.333333s8.533333 21.333333 21.333333 21.333333H853.333333c12.8 0 21.333333-8.533333 21.333334-21.333333s-10.666667-21.333333-21.333334-21.333333z" p-id="5893"></path></svg>
<div class="fatkun-title">拖拽到此处</div>
<div class="fatkun-desc">图片将完成下载</div>
</div>
</div>
</div></body><style type="text/css" id="862529108108"></style></html>

posted @ 2020-05-09 17:33 自联网阅读(197) 评论(1) 收藏举报

刷新页面返回顶部

自联网 文档对比网页技术分享，纯HTML

公告

自联网文档对比网页技术分享，纯HTML