纯JavaScript代码实现文本比较工具


Posted in Javascript onFebruary 17, 2016

之前项目需求需要写一个纯js文本比较工具,在此小编把代码分享在三水点靠木平台供大家参考,算法有待优化,本文写的不好还请见谅。

先上效果图:

纯JavaScript代码实现文本比较工具

代码如下所示:

把源码保存为html格式的文件就可以直接运行了

<!doctype html>
<html>
<head>
<title>文本比较工具</title>
<style type="text/css">
*{padding:px;margin:px;}
html,body{
overflow-y: hidden;
}
.edit_div{
border: px solid #CCCCCC;
overflow: auto;
position: relative;
}
.edit_div textarea{
resize:none;
background: none repeat scroll transparent;
border: none;
width: %;
height:px;
overflow-y: scroll;
position: absolute;
left: px;
top: px;
z-index: ;
font-size: px;
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: %;
height:px;
text-align: left;
color: #ffffff;
z-index: ;
font-size: px;
}
</style>
</head>
<body>
<table style="width:%">
<tr>
<td style="width:%">
<div class="edit_div">
<pre id="edit_pre_"></pre>
<textarea id="edit_textarea_" onscroll="test_scroll()" oninput="textchange()" onpropertychange="textchange()"></textarea>
</div>
</td>
<td style="width:%">
<div class="edit_div">
<pre id="edit_pre_"></pre>
<textarea id="edit_textarea_" onscroll="test_scroll()" oninput="textchange()" onpropertychange="textchange()"></textarea>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
function test_scroll(){
document.getElementById("edit_pre_").scrollTop=document.getElementById("edit_textarea_").scrollTop;
document.getElementById("edit_pre_").scrollTop=document.getElementById("edit_pre_").scrollTop;
document.getElementById("edit_textarea_").scrollTop=document.getElementById("edit_textarea_").scrollTop;
}
function test_scroll(){
document.getElementById("edit_pre_").scrollTop=document.getElementById("edit_textarea_").scrollTop;
document.getElementById("edit_pre_").scrollTop=document.getElementById("edit_pre_").scrollTop;
document.getElementById("edit_textarea_").scrollTop=document.getElementById("edit_textarea_").scrollTop;
}
function textchange(){
var op = eq({ value: document.getElementById("edit_textarea_").value, value: document.getElementById("edit_textarea_").value });
document.getElementById("edit_pre_").innerHTML=op.value+"\r\n";
document.getElementById("edit_pre_").innerHTML=op.value+"\r\n";
}
function eq(op) {
if(!op){
return op;
}
if(!op.value_style){
op.value_style="background-color:#FECC;";
}
if(!op.value_style){
op.value_style="background-color:#FECC;";
}
if(!op.eq_min){
op.eq_min=;
}
if(!op.eq_index){
op.eq_index=;
}
if (!op.value || !op.value) {
return op;
}
var ps = {
v_i: ,
v_new_value: "",
v_i: ,
v_new_value: ""
};
while (ps.v_i < op.value.length && ps.v_i < op.value.length) {
if (op.value[ps.v_i] == op.value[ps.v_i]) {
ps.v_new_value += op.value[ps.v_i].replace(/</g,"<").replace(">",">");
ps.v_new_value += op.value[ps.v_i].replace(/</g,"<").replace(">",">");
ps.v_i += ;
ps.v_i += ;
if (ps.v_i >= op.value.length) {
ps.v_new_value += "<span style='" + op.value_style + "'>" + op.value.substr(ps.v_i).replace(/</g,"<").replace(">",">") + "</span>";
break;
}
if (ps.v_i >= op.value.length) {
ps.v_new_value += "<span style='" + op.value_style + "'>" + op.value.substr(ps.v_i).replace(/</g,"<").replace(">",">") + "</span>";
break;
}
} else {
ps.v_index = ps.v_i + ;
ps.v_eq_length = ;
ps.v_eq_max = ;
ps.v_start = ps.v_i + ;
while (ps.v_index < op.value.length) {
if (op.value[ps.v_index] == op.value[ps.v_i + ps.v_eq_length]) {
ps.v_eq_length += ;
} else if (ps.v_eq_length > ) {
if (ps.v_eq_max < ps.v_eq_length) {
ps.v_eq_max = ps.v_eq_length;
ps.v_start = ps.v_index - ps.v_eq_length;
}
ps.v_eq_length = ;
break;//只寻找最近的
}
ps.v_index += ;
}
if (ps.v_eq_max < ps.v_eq_length) {
ps.v_eq_max = ps.v_eq_length;
ps.v_start = ps.v_index - ps.v_eq_length;
}
ps.v_index = ps.v_i + ;
ps.v_eq_length = ;
ps.v_eq_max = ;
ps.v_start = ps.v_i + ;
while (ps.v_index < op.value.length) {
if (op.value[ps.v_index] == op.value[ps.v_i + ps.v_eq_length]) {
ps.v_eq_length += ;
} else if (ps.v_eq_length > ) {
if (ps.v_eq_max < ps.v_eq_length) {
ps.v_eq_max = ps.v_eq_length;
ps.v_start = ps.v_index - ps.v_eq_length;
}
ps.v_eq_length = ;
break;//只寻找最近的
}
ps.v_index += ;
}
if (ps.v_eq_max < ps.v_eq_length) {
ps.v_eq_max = ps.v_eq_length;
ps.v_start = ps.v_index - ps.v_eq_length;
}
if (ps.v_eq_max < op.eq_min && ps.v_start - ps.v_i > op.eq_index) {
ps.v_eq_max = ;
}
if (ps.v_eq_max < op.eq_min && ps.v_start - ps.v_i > op.eq_index) {
ps.v_eq_max = ;
}
if ((ps.v_eq_max == && ps.v_eq_max == )) {
ps.v_new_value += "<span style='" + op.value_style + "'>" + op.value[ps.v_i].replace(/</g,"<").replace(">",">") + "</span>";
ps.v_new_value += "<span style='" + op.value_style + "'>" + op.value[ps.v_i].replace(/</g,"<").replace(">",">") + "</span>";
ps.v_i += ;
ps.v_i += ;
if (ps.v_i >= op.value.length) {
ps.v_new_value += "<span style='" + op.value_style + "'>" + op.value.substr(ps.v_i).replace(/</g,"<").replace(">",">") + "</span>";
break;
}
if (ps.v_i >= op.value.length) {
ps.v_new_value += "<span style='" + op.value_style + "'>" + op.value.substr(ps.v_i).replace(/</g,"<").replace(">",">") + "</span>";
break;
}
} else if (ps.v_eq_max > ps.v_eq_max) {
ps.v_new_value += "<span style='" + op.value_style + "'>" + op.value.substr(ps.v_i, ps.v_start - ps.v_i).replace(/</g,"<").replace(">",">") + "</span>";
ps.v_i = ps.v_start;
} else {
ps.v_new_value += "<span style='" + op.value_style + "'>" + op.value.substr(ps.v_i, ps.v_start - ps.v_i).replace(/</g,"<").replace(">",">") + "</span>";
ps.v_i = ps.v_start;
}
}
}
op.value = ps.v_new_value;
op.value = ps.v_new_value;
return op;
}
function settextheight(){
var heigth=(document.documentElement.clientHeight-)+"px"
document.getElementById("edit_pre_").style.height=heigth;
document.getElementById("edit_textarea_").style.height=heigth;
document.getElementById("edit_pre_").style.height=heigth;
document.getElementById("edit_textarea_").style.height=heigth;
}
window.onload=function(){
settextheight();
window.onresize=function(){
settextheight();
}
}
</script>
</body>
</html>

以上代码是使用的纯JavaScript代码实现文本比较工具,希望对大家有所帮助!

Javascript 相关文章推荐
js CSS操作方法集合
Oct 31 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
node中的cookie的具体使用
Sep 13 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 Javascript
JavaScript实现身份证验证代码
Feb 17 #Javascript
AngularJS 最常用的功能汇总
Feb 17 #Javascript
AngularJS身份验证的方法
Feb 17 #Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 #Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 #Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 #Javascript
Bootstrap中CSS的使用方法
Feb 17 #Javascript
You might like
php xml-rpc远程调用
2008/12/19 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Python温度转换实例分析
2018/01/17 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
python——全排列数的生成方式
2020/02/26 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
华为的Java面试题
2014/03/07 面试题
《彩色世界》教学反思
2014/04/12 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
地道战观后感400字
2015/06/04 职场文书
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL