纯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 相关文章推荐
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
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 表单数据的获取代码
2009/03/10 PHP
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
php实现网页端验证码功能
2017/07/11 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
Js的MessageBox
2006/12/03 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
python数据清洗系列之字符串处理详解
2017/02/12 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
Python实现购物车程序
2018/04/16 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
经典c++面试题六
2012/01/18 面试题
班干部竞选演讲稿
2014/04/24 职场文书
七一党日活动总结
2014/07/08 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
公司停电通知
2015/04/15 职场文书
运动会广播稿100字
2015/08/19 职场文书
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS