利用jq對比兩段文本的差異，差異的內(nèi)容用不同顏色表示出來。
創(chuàng)新互聯(lián)公司服務(wù)項目包括定結(jié)網(wǎng)站建設(shè)、定結(jié)網(wǎng)站制作、定結(jié)網(wǎng)頁制作以及定結(jié)網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，定結(jié)網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到定結(jié)省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
在線參考demo：
http://incaseofstairs.com/jsdiff/
項目地址：
https://github.com/kpdecker/jsdiff
先上效果圖：
左側(cè)第一列是原稿，第二列是需要對比稿，第三列是對比后的結(jié)果。
紅色文字刪除線表示對比稿相對原稿缺少的文字，綠色下劃線文字表示對比稿相對原稿新增的文字。
同時支持三種方式：Chars，以字符顯示差異；Words，以整句或段顯示對比差異；Lines以行顯示差異。
html源碼：
重慶分公司
重慶分公司
DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>比較文本差異title>
<styletype="text/css">
table{ width: 100%; height: 600px; }
tr{ flex-direction: row; display: -webkit-flex; display: flex; height: 100%; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
tr td{ width: 33%; border: 1px solid #000000; }
del{ background: #ff0000; }
ins{ background: #00ff21; }
style>
head>
<body>
<divid="settings">
<h1>比較文本差異（只適合比較純文本且不帶html標(biāo)簽）h1>
<label><inputtype="radio" name="diff_type" value="diffChars" checked> Charslabel>
<label><inputtype="radio" name="diff_type" value="diffWords"> Wordslabel>
<label><inputtype="radio" name="diff_type" value="diffLines"> Lineslabel>
div>
<ahref="https://github.com/kpdecker/jsdiff" class="source">github.com/kpdecker/jsdiffa>
<table>
<tr>
<tdcontenteditable="true" id="a">restauranttd>
<tdcontenteditable="true" id="b">auratd>
<td><divid="result">div>td>
tr>
table>
<scriptsrc="/static/index/js/diff.js">script>
<scriptdefer>
var a= document.getElementById('a');
var b= document.getElementById('b');
var result= document.getElementById('result');
function changed() {
console.log('***********************************************');
var oldContent= a.textContent;
var content1= b.textContent;
//console.log("content1-----");
//console.log(content1);
//diffChars以字符顯示差異
//diffWords以整句或段顯示對比差異
//diffLines以行顯示差異
//window.diffType
var diff= JsDiff[window.diffType](oldContent, content1);
var arr= new Array();
for (var i= 0; i< diff.length; i++) {
if (diff[i].added&& diff[i+ 1]&& diff[i+ 1].removed) {
var swap= diff[i];
diff[i]= diff[i+ 1];
diff[i+ 1]= swap;
}
console.log(diff[i]);
var diffObj= diff[i];
var content= diffObj.value;
//可以考慮啟用，特別是后臺清理HTML標(biāo)簽后的文本
if (content.indexOf("\n")>= 0) {
//console.log("有換行符");
//替換為
var reg= new RegExp('\n','g');
content= content.replace(reg,'
');
}
//var reg2 = new RegExp('##em2', 'g');
//var reg3 = new RegExp('replace##', 'g');
//content = content.replace(reg2, '');
//content = content.replace(reg3, '');
if (diffObj.removed) {
arr.push('
