纯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 相关文章推荐
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
理解JavaScript原型链
Oct 25 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php读取xml实例代码
2010/01/28 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
smarty简单入门实例
2014/11/28 PHP
详细讲解JS节点知识
2010/01/31 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
利用python生成照片墙的示例代码
2020/04/09 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
中学生期中自我鉴定
2014/04/20 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
篮球拉拉队口号
2015/12/25 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
解析Java异步之call future
2021/06/14 Java/Android
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB
Python循环之while无限迭代
2022/04/30 Python