纯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 相关文章推荐
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
vue.js实例todoList项目
Jul 07 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 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详细彻底学习Smarty
2008/03/27 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
python实现简单温度转换的方法
2015/03/13 Python
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
浅谈Python的文件类型
2016/05/30 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
python 拼接文件路径的方法
2018/10/23 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
应届毕业生自荐信例文
2014/02/26 职场文书
学习决心书
2014/03/11 职场文书
保密承诺书
2014/03/27 职场文书
暑假家长评语大全
2014/04/17 职场文书
阅兵口号
2014/06/19 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
病危通知单
2015/04/17 职场文书