演示地址：http://lxfamn.cn/tools/txtcompare
@extends('tools.layouts.layout')
@section('content')
<script src="/js/vendor/layui/layui.js "></script>
<div class="container" >
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
<form class="layui-form layui-form-pane" style="margin-top: 10px" lay-filter="barform">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label" style="color:red;"><strong>比较基准</strong></label>
<div class="layui-input-block">
<textarea id="inputvalue1" name="inputvalue1" style="height: 250px; !important" placeholder="请输入内容" class="layui-textarea" ></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label" style="color:red;"><strong>对比内容</strong></label>
<div class="layui-input-block">
<textarea id="inputvalue2" name="inputvalue2" style="height: 250px; !important" placeholder="请输入内容" class="layui-textarea" ></textarea>
</div>
</div>
<button class="layui-btn" style="background-color:forestgreen" lay-submit lay-filter="confirmbtn" onclick="dealcontent()" id="confirmbtn" name="confirmbtn">格式化</button>
</form>
</div>
{{-- <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">--}}
{{-- <div id="codediv">--}}
{{-- <pre class="layui-code code-demo" id="codeshow" >--}}
{{-- <h1>公众号:Alxfamn</h1>--}}
{{-- 转换结果将在此处显示--}}
{{-- </pre>--}}
{{-- --}}{{-- <code id="codeshow" style="white-space:break-spaces"></code>--}}
{{-- </div>--}}
{{-- </div>--}}
<fieldset style="font-size: 20px;">
{{-- <legend>差异效果</legend>--}}
<div class="layui-panel" >
<div class="layui-card-header">对比基准</div>
<div style="padding: 32px;" id="div5">面板任意内容</div>
</div>
<div class="layui-panel" >
<div class="layui-card-header">对比内容</div>
<div style="padding: 32px;" id="div6">面板任意内容</div>
</div>
</fieldset>
</div>
</div>
<style>
.layui-form-label {
width: 90px !important;
text-align: center !important;
}
@media screen and (max-device-width:400px){
.layui-input-inline {
margin-left: 90px !important;
width: 80px !important;
}
}
@media screen and (min-device-width:400px){
.layui-input-inline {
margin-left: 0px !important;
width: 80px !important;
}
}
</style>
@section("recommand")
@include('tools.layouts.component.recommond')
@endsection
@section("comments")
@include('tools.layouts.component.comments')
@endsection
<script>
/**
* 【文本比较插件】
* 传递两个参数dom1、dom2，以dom1为基准进行比较。
* 0）dom1和dom2不能都为空；
* 1）如果dom1不存在，则dom2为新增效果
* 2）如果dom2不存在，则dom1为删除效果
* 3）如果dom1和dom2存在，则进行文本差异比较
*
*/
(function(window,document){
function MyCompare(dom1,dom2){
if(!dom1&&!dom2){
console.log('参数错误：dom1、dom2不能为空。');
return;
}
else if(!dom1){
//dom1为空：新增
dom2.style.color = '#90EE90';
}else if(!dom2){
//dom2为空：删除
dom1.style.color = '#FF6347';
dom1.style.textDecoration = 'line-through';
}else{
//进行差异比较
var result = _eq({value1:dom1.innerText||dom1.innerHTML,value2:dom2.innerText||dom2.innerHTML});
dom1.innerHTML = result.value1;
dom2.innerHTML = result.value2;
}
}
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;
}
window.CompareTxt = MyCompare;
})(window,document);
</script>
<script>
//添加效果
// CompareTxt(null,document.getElementById('div2'));
// //删除效果
// CompareTxt(document.getElementById('div3'),null);
//差异效果
layui.use(['table','form','element','code'], function(){
var form = layui.form;
var element = layui.element;
// code
layui.code({
elem: '.code-demo',
header:true,
about:'json转换',
copy:true,
preview:'iframe',
layout: ['code' ],
tools: ['full'],
in:true,
// done: function(obj){
//
// var container = obj.container; // 当前面板的容器对象
// obj.render(); // 对预览中的 `element,form` 等组件进行渲染
// }
});
//查询数值
form.on('submit(confirmbtn)', function(data){
//调用函数获取到img的data数据
// $("#codeshow").value=( JSON.stringify( JSON.parse( $("#inputvalue").val()), null, 2) )
// docoumnet.getElementById("#codeshow").innerHTML=(JSON.stringify( JSON.parse( $("#inputvalue").val()), null, 2) );
// $("#codeshow").val(JSON.stringify( JSON.parse( $("#inputvalue").val()), null, 2) );
// $("#codeshow").val( JSON.stringify( JSON.parse( $("#inputvalue").val()), null, 2) );
// element.init();
// code
// layui.code({
// elem: '.code-demo',
// header:true,
// about:'json转换',
// copy:true,
//
// });
return false;
});
return false;
});
function dealcontent(){
document.getElementById('div5').innerHTML=$("#inputvalue1").val();
document.getElementById('div6').innerHTML=$("#inputvalue2").val();
CompareTxt(document.getElementById('div5'),document.getElementById('div6'));
}
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
</script>
@endsection
@section('foot')
@include('tools.layouts.foot.menufootbar')
@endsection
