关键词:
一、先上效果图
二、JS代码
/** * 【文本比较插件】 * 传递两个参数dom1、dom2,以dom1为基准进行比较。 * 0)dom1和dom2不能都为空; * 1)如果dom1不存在,则dom2为新增效果 * 2)如果dom2不存在,则dom1为删除效果 * 3)如果dom1和dom2存在,则进行文本差异比较 * */ (function(window,document){ function MyCompare(dom1,dom2){ if(!dom1&&!dom2){ console.log('参数错误:dom1、dom2不能为空。'); return; } else if(!dom1){ //dom1为空:新增 dom2.style.color = '#90EE90'; }else if(!dom2){ //dom2为空:删除 dom1.style.color = '#FF6347'; dom1.style.textDecoration = 'line-through'; }else{ //进行差异比较 var result = _eq({value1:dom1.innerText||dom1.innerHTML,value2:dom2.innerText||dom2.innerHTML}); dom1.innerHTML = result.value1; dom2.innerHTML = result.value2; } } function _eq(op) { if(!op){ return op; } if(!op.value1_style){ op.value1_style="background-color:#FEC8C8;"; } 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; } window.CompareTxt = MyCompare; })(window,document);
三、调用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>360手机浏览器小说新人专享礼包</title> <style> html,body{ margin:0; padding:0; } fieldset{ width:200px; margin:20px auto; } </style> </head> <body> <fieldset> <legend>添加效果</legend> <div id="div1">1111111</div> <div id="div2">2211122</div> </fieldset> <fieldset> <legend>删除效果</legend> <div id="div3">1111111</div> <div id="div4">2211122</div> </fieldset> <fieldset> <legend>差异效果</legend> <div id="div5">1111111</div> <div id="div6">2211122</div> </fieldset> <script src="compare.js"></script> <script> //添加效果 CompareTxt(null,document.getElementById('div2')); //删除效果 CompareTxt(document.getElementById('div3'),null); //差异效果 CompareTxt(document.getElementById('div5'),document.getElementById('div6')); </script> </body> </html>
四、代码下载
https://pan.baidu.com/s/1o8n30MI
web前端用哪个软件比较好?
推荐一些Web前端开发常用工具。1、AptanaStudioAptanaStudio是一个集成式的Web应用程序开发环境,它不仅可以作为独立的程序运行,而且还可以作为Eclipse插件使用。所以,如果您已经安装了Eclipse的话,就可以将Aptana作为插件直接安装... 查看详情
一些前端用的js插件
整理一些常用的JS库,其中大多数是jQuery相关插件,也有Bootstrap辅助插件及非jQuery插件。其功能涉及:页面布局、图片幻灯片播放、图片像册展示、功能辅助等内容。本篇只是简单介绍插件功能,以后使用到相关插件时再补充介... 查看详情
前端插件实现图片懒加载
一、echo.js: 我们在开发页面的时候肯定会遇到图片比较多的时候,虽然我们可能有图片分布式的服务器,但是在客户端还是会有很大的性能开销。为了用户体验,特别是对首屏加载速度要求很高的,通常我们会考虑图片延... 查看详情
突然觉得前端js挺不错的
由于工作的需要,现在对前端技术有一定的要求,但是发现普遍前端技术都比较弱,遇到问题基本上没有人能帮助你解决,只好自己学习了。从事java开发已经好久了,真的是好久了,但是水平一直还是一般吧。从今天开始学习... 查看详情
文本编辑器js插件
1.首先引入所需js文件1<!--文本编辑器js组件-->2<scripttype="text/javascript"charset="utf-8"src="ueditor/utf8-php/ueditor.config.js"></script>3<scripttype="text/javascript"charset="utf-8"src="uedit 查看详情
前端插件--swipe.js
swipe.js的作用:这是一个轻量级的移动滑动组件,支持触摸移动,支持响应式页面.效果图: 代码:1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Title</title>6<style>7*{8padding:0; 查看详情
js前端数据加密插件
...nbsp; (2014-11-1415:37:35)转载▼标签: it分类: Web前端开发摘要: 大部分动态网站都支持从客户端到服务器传递数据,如果传递的数据被别人截取就非常危险,尤其是一些用户名密码之类的。这时候就需... 查看详情
前端如何引入vconsole(代码片段)
...le.js?因为手机或者平板之类的客户端软件并没有控制台,前端开发想看log日志比较麻烦,如果一直弹窗alert方法实在太挫了。所以腾讯开发了这个js插件。注意点vconsole这个插件源码里面是依赖htmldomapi来实现的,如果你所使用的... 查看详情
40款经典前端特效插件---分享
参考技术A1.flavr—超级漂亮的jQuery扁平弹出对话框 2.轻量级触摸响应滑块插件JQuerylightSlider 3.带37种3D动画特效的跨浏览器CSS3动画框架 4.jquery整屏滚动插件Scrollify 5.jquery... 查看详情
前端页面性能参数搜集
经常会看些性能分析的书,但是实际在做优化的时候又无从下手。因为没有数据,也不能确定实际用户到底在哪一环影响了他们的性能。现在H5提供了一些很方便的Performance接口,可以让我们更方便的搜集到用户的数据,不... 查看详情
js前端注入文本过滤器xssfilter-js
在前端开发中总是认为自己实现了业务代码满足了用户需求,却不知web存在的许多安全隐患,如各种的注入攻击,xss跨站脚本攻击,跨域请求伪造,以及之前提到的不安全的http,其他等等。本人写了一个对于注入攻击可以过滤... 查看详情
前端——jquery表单验证插件
1、引入JQuery插件(依赖JQuery)<scriptsrc="js/jquery-1.11.3.min.js"type="text/javascript"></script><scriptsrc="js/jquery.validate.min.js"type="text/javascript"></script>2、定义校验规则键是标签的名字$ 查看详情
常用的前端开发工具?开发过啥应用或组件?
...Raphael.js等。(理解这些框架的功能、性能、设计原理)前端开发工具:WebStorm,Hbuilder,SublimeText、Eclipse、Notepad、Firebug、HttpWatch、Yslow。开发过的插件:城市选择插件,汽车型号选择插件、幻灯片插件。弹出层。(写过开源程序,... 查看详情
JS草案,提到插件呈现为纯文本
】JS草案,提到插件呈现为纯文本【英文标题】:DraftJS,mentionpluginrendersasplaintext【发布时间】:2021-01-2712:30:46【问题描述】:我正在使用提及插件实现React的“draftjs”。https://www.draft-js-plugins.com/到目前为止,我能够创建编辑器并... 查看详情
前端路由插件
Q.js:http://www.xuanfengge.com/web-route-frame.html?utm_source=tuicool&utm_medium=referralpage.js:https://blog.csdn.net/yiifaa/article/details/53219711 查看详情
前端上传插件plupload的实际使用(个人实操)
一个主要的页面,其中包裹了一个iframe页面,在项目中,这个iframe页面包裹在主页面的div标签中,主要用于上传文件附件。用的是plupload.full插件,主要引入以下几个js:jquery-1.11.1.js;moxie.js;plupload.full.min.js;plupload.dev.js;css部... 查看详情
bootstrap一些提示信息插件
前端总是会有很多信息提示的时候,最简单的可以用javascript自带的alert,confirm等。这些虽然和js的配合很好,但是很丑。 bootstrap给我们提供了一些不同的方案比如modal的模态对话框,popover,tooltip等比较好看的提示框。这... 查看详情
前端js进行app版本号比较方法
参考技术A/***比较版本号的大小,如果curV大于reqV,则返回true,否则返回false*@paramStringcurV*@paramStringreqV*/functionVersion(curV,reqV) vararr1=curV.toString().split('.'); vararr2=reqV.toString().split('.');... 查看详情