【编程之美14期】做一个web文本比对应用，让论文不再烦恼

程序员的惊奇之处就是别人用工具学习怎样做的时候，你早已用你的几行代码实现了自己想做的事情~

马上就毕业了，大家最近要忙的就是毕业论文，那么查重也成了一个非常重要的问题，程序员自己就可以搞定的！

我们的口号就是搞（服）事（务）搞（生）事（活）！

不限框架和语言，做一个web文本比对应用。

让代码,论文,文案…多次迭代，变化依旧清晰可见！

“编程之美，让你爱上编程的美。”

挑战下面编程题目，

一起体验编程的乐趣！

本期题目：

不限框架和语言，做一个web文本比对应用。

让代码,论文,文案…多次迭代，变化依旧清晰可见！

实现功能：查询你每次文本变化的地方，精确到空格。

编程之美独有福利：

这个栏目就是为了培养大家编程动手习惯并且提高编程能力的一个平台，我们现如今给参与这个栏目的提供如下福利：

源码分享

每周评比编程之星（奖励牛客大礼包一份，这回是充满惊喜，每个大礼包里不一定包括什么）

企业实习工作机会

独家名誉及待遇

参与开源项目

定期的分享讲座

等等等等！我们想进行一些不一样的玩法，让学习变得更有趣！无论你找到工作与否，即使是已经工作了，你也要有一个练手交流的平台~

当然啦，重要的是来练习自己的编程能力，分享代码，交流技术的过程，这个过程中，你提升的不只是一点点~

为了让牛友能够更高效，更好的学习，特意为大家建了一个群：牛客编程之美源码群 595665246，只给真正想参与这个栏目和真正想学习的人开放，会在群里定期分享源码，只让真正想学习的人来参加，所以只有参与栏目（在本栏目下发出自己的代码的)才能加，加的时候备注一下牛客昵称~

编程之星

每一期的玩法都不一样！每一期的编程之星的规则也不一样~~重要的是人人都参与进来

本期编程之星评比规则：由评委来评选~

注：因为目前群成员比较多，本着只让真正想参与的人进来的原则，可能后期会整理群啦，对这个没有兴趣的我们就会把位置让给真正有兴趣参加的人啦~

栏目介绍

编程之美，是牛客网推出的新栏目，每周推出一个项目供大家练手讨论交流。

如果你有想实现的项目问题，欢迎私信牛妹~

另外！另外！如果有好玩的项目题目可以私信牛妹，一经采用有奖励哦~~

如果你有写博客或者公众号的习惯，也欢迎加牛妹qq：1037532015私信。

全部评论

推荐最新楼层

武汉孙一峰

C++

一个纯Js的文本比较工具，下面是html的代码，只完成了简单的2个文本比较，显示出修改的内容。感觉比较好的应该是像git上那样，做了哪些修改都会显示出来的那种。例如这样：然而事实是只做一个这样的： <!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:#00DB00;"; } 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>