Java script
javascript 版本控制 diff merge
目前在開發一個系統，而客戶需求需要就像是google doc同步編輯一樣
但是同步編輯這點實在太難了，根本就是浩大工程，我只好降而求其次把她轉成版本控制這樣
至少user再送出時，知道版本相衝了可以線上merge回來後再存檔
而現在所缺的就是該怎樣標色出來兩個版本不同的地方才是問題
因為我們編輯內容時都會在textarea裡面編輯，所以如果上網查 javascript diff的話
會有不少不錯的東西，如下面網址這個
http://codemirror.net/demo/merge.html
這幾乎已經達到我的需求的，問題是我的textarea 其實有套wysiwyg所見及所得的編輯器
所以user打出來的跟顯示出來的都會是html
而上面找到的那些都不支援(正確來說 他們會直接把html顯示出來而不是表現出來)
這樣的diff 那些user一定看不懂啊，他們都不知道啥html他們只會 word的編輯方式
好在 我查到某個人寫了一篇文章 用 JavaScript 作 HTML 比較(diff)
雖然畫面不美觀，不過倒是具有html的比對的效果了
在這邊紀錄一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta name="author" content="jax">
<meta name="email" content="weskerjax@gmail.com">
<meta name="website" content="http://jax-work-archive.blogspot.com/">
<link href="https://sites.google.com/site/weskerjax/material/jax_logo.ico" type="image/ico" rel="shortcut icon" />
<link href="https://sites.google.com/site/weskerjax/material/jax_logo.png" type="image/png" rel="icon" />
<title>Demo HTML Diff</title>
<style type="text/css"><!--
ins {background-color: #cfc;}
del {background-color: #fcc;}
--></style>
<script language="javascript" type="text/javascript"><!--
function $(el){
return document.getElementById(el);
}
/*切割文字*/
function toReg(str){
var array = str.match(/<[^>]*>|[^< ,.rnt]+[ ,.rnt]*/ig);
result=[];
for(var i=0,l=array.length;i<l;i++){
if(array[i].charAt(0)=='<'){
var temp=array[i].match(/[^<][^> ]*/i);
result[i]={txt:array[i],tag:temp};
}else{
result[i]={txt:array[i],tag:false};
}
}
return result;
}
/*最長共同部分序列*/
function LCS(na,oa){
var m=na.length, n=oa.length;
var i,j;
var d=[];/*Dynamic*/
for(i=0;i<=m;i++){d[i]=[];d[i][0]=0;}
for(j=1; j<=n;j++){d[0][j]=0;}
/*動態規劃演算法*/
for(i=1; i<=m; i++){
for(j=1; j<=n; j++){
if(na[i-1].txt==oa[j-1].txt){
d[i][j]=d[i-1][j-1]+1;
}else if(na[i-1].tag && na[i-1].tag==oa[j-1].tag){
d[i][j]=d[i-1][j-1]+1;
}else if(d[i][j-1] > d[i-1][j]){
d[i][j]=d[i][j-1];
}else{
d[i][j]=d[i-1][j];
}
}
}
/*標註共同部分序列*/
i=m;j=n;
while(i>0 && j>0){
if(d[i][j]==d[i-1][j]){
i--;
}else if(d[i][j]==d[i][j-1]){
j--;
}else{
i--;j--;
na[i].com=j;
oa[j].com=i;
}
}
delete d;
}
/*合併比較陣列*/
function merge(na,oa){
var m=na.length, n=oa.length;
var result=[];
if(!m && !n){return null;}
var i;
var oldPrint=0;
for(i=0; i<m; i++){
/*有共同的資料*/
if(na[i].com!=undefined){
/*有刪除的舊資料*/
if(na[i].com>oldPrint){
var maxRow=(na[i].com<n)?na[i].com:n;
for(j=oldPrint;j<maxRow;j++){
if (oa[j].tag) {
result.push(oa[j].txt);
}else{
result.push('<del>'+oa[j].txt+'</del>');
}
}
}
/*記錄下一次舊資料的指標*/
oldPrint=na[i].com+1;
/*儲存共同的資料*/
result.push(na[i].txt);
/*新的差異資料*/
}else{
if (na[i].tag) {
result.push(na[i].txt);
}else{
result.push('<ins>'+na[i].txt+'</ins>');
}
}
}
return result;
}
window.onload=function(){
$('diff_button').onclick=function(){
var oa=toReg($('elm1').value);
var na=toReg($('elm2').value);
LCS(na,oa);
var op=merge(na,oa);
$('output_widget').innerHTML=op.join('');
};
};
//-->
</script>
</head>
<body>
<div >
<textarea id="elm1" name="elm1" rows="15" cols="40">
<a href="http://www.idn.com.tw/news/news_content.php?catid=2&catsid=1&catdid=0&artid=20080502clc003" id="s-aYKoMqpcJD0HLvE5Hvof9Q:u-AFrqEzcmiutakICCISg67eWKaYHAZ4rIDg:r-1_1160181886" target="_blank">浪琴表母親節『讓愛傳承』慈善公益活動登場</a><br />
自立晚報 - 9小時前<br />
擁 有超過175年歷史的浪琴表對於投入全球公益活動一向不遺餘力，在母親節前夕推出以母愛如同和煦朝陽與溫柔月光為設計靈感之母親節限定錶款，於5月2日舉辦結合慈善公益之上市活動11，並將活動中義賣所得捐助給「東元文教基金會」，協助原住民 <strong>...</strong><br />
<a href="http://1-apple.com.tw/index.cfm?Fuseaction=Article&Sec_ID=7&ShowDate=20080503&IssueID=20080503&art_id=30514063&NewsType=1&SubSec=82" id="s-1KvHFP26tD2KWoybgyxgYg:u-AFrqEzd1glvtB0oyUmBMaGL-Qhv7rPMZkQ" target="_blank">林志玲挺浪琴錶做公益打鼓慢半拍</a> 壹蘋果網絡<br />
<a href="http://member.nownews.com/newsflash/newsurl3.php?url=http://www.nownews.com/2008/05/02/545-2269301.htm" id="s-X5C50YVyOvFPNXge9ffz3A:u-AFrqEzeOEdz6zZNjB3WgPJhnmQxrgbNlKQ" target="_blank">優雅代言廠商透露林志玲小故事讓人感動紅了眼眶…1111</a> NOWnews<br />
<a href="http://news.gpwb.gov.tw/news.php?css=2&nid=42885&rtype=1" id="s-PuT-L3CJPd9yQ22gfVyweA:u-AFrqEzcTdCHSt7MPYuI2yFZxVH3VPfjhPw" target="_blank">軍事新聞網</a> - <a href="http://news.sina.com/sinacn/202-000-103-107/2008-05-02/2024528379.html" id="s-xfTFj-OYERxUixohd5ldOQ:u-AFrqEzexFrRJnmiU4vm-Fjs5DlVldzdlxw" target="_blank">新浪北美</a><br />
<a href="http://news.google.com.tw/nwshp?tab=wn&ned=tw&ncl=1160181886&hl=zh-TW&topic=e">所有 19 則相關新聞 »</a>
<p><a href="http://www.nytimes.com/2008/05/03/world/europe/03britain.html" id="s-4IthLo6s43fExpylwhZ_mg:u-AFrqEzcmli_A1dxsDraazzQnEQTRw6_0EQ:r-0-0_1142555348"><strong>Tory Beats Laborite to Become Mayor of London</strong></a><br />
<strong>Times - 1 hour ago</strong><br />
By SARAH LYALL LONDON - the floppy-haired media celebrity Conservative member of Parliament who transformed himself from a shambling, amusing-aphorism-uttering figure of fun into a plausible political force, was elected mayor of <strong>...</strong><br />
<a href="http://news.bbc.co.uk/" id="s-YdynOO1KE5YGlKFAdF2-yg:u-AFrqEzd_r8XBr4YibcRxzOXMI7p_qQ74fw">Johnson wins London mayoral race</a> BBC News<br />
<a href="http://ap.google.com/article/ALeqM5iueIorulWcBLTxZX0kY9VPtD71FgD90DS3M00" id="s-klF9FQo4q1vdL_opSr_kfA:u-AFrqEzfi-y66SCQBLJ4ARxLgA-nCCriz3A">Eccentric test opposition lawmaker ousts Labour mayor of London</a> The Associated Press<br />
<a href="http://www.reuters.com/article/newsMaps/idUSL0372883120080503" id="s-z3GFpW13NDW3nf1jTTUqRQ:u-AFrqEzcxHgYffo_4EgfLh7tx1h9pChmClQ">Reuters</a> - <a href="http://washingtontimes.com/apps/pbcs.dll/article?AID=/20080503/FOREIGN/405210801/1001" id="s-o0BiaCxIdZIFJd7abGDGzA:u-AFrqEzdiDLiIaSyOHr3aMAQ_pVtKrHnqLw">Washington Times</a> - <a href="http://www.bloomberg.com/apps/news?pid=20601087&sid=akGHB2XffcnE&refer=home" id="s-s7H5pqn2VEC78y5U1S91kQ:u-AFrqEzevopG-oPJR7lwZHWqcNgeAb4ktow">Bloomberg</a> - <a href="http://www.timesonline.co.uk/tol/news/politics/article3865065.ece" id="s-4eHKY5KXnc0gKEYVHo3lbA:u-AFrqEzdURTkm0Cnmk2jKvvSwO_b3rdBFYg">Times Online</a><br />
<a href="http://news.google.com.tw/news?ned=us&ncl=1142555348&hl=en&topic=h"><strong>all 1,590 news articles »</strong></a></p>
</textarea>
<textarea id="elm2" name="elm2" rows="15" cols="40">
<a href="http://www.idn.com.tw/news/news_content.php?catid=2&catsid=1&catdid=0&artid=20080502clc003" id="s-aYKoMqpcJD0HLvE5Hvof9Q:u-AFrqEzcmiutakICCISg67eWKaYHAZ4rIDg:r-1_1160181886" target="_blank">浪琴表母親節『讓愛傳承』慈善公益活動登場</a><br />
自立晚報 - 9小時前<br />
擁 有超過175年歷史的浪琴表對於投入全球公益活動一向不遺餘力，在母親節前夕推出以母愛如同和煦朝陽與溫柔月光為設計靈感之母親節限定錶款『燦陽繫情』、 『星月寄情』系列，於5月2日舉辦結合慈善公益之上市活動，並將活動中義賣所得捐助給「東元文教基金會」，協助原住民 <strong>...</strong><br />
<a href="http://1-apple.com.tw/index.cfm?Fuseaction=Article&Sec_ID=7&ShowDate=20080503&IssueID=20080503&art_id=30514063&NewsType=1&SubSec=82" id="s-1KvHFP26tD2KWoybgyxgYg:u-AFrqEzd1glvtB0oyUmBMaGL-Qhv7rPMZkQ" target="_blank">林志玲挺浪琴錶做公益打鼓慢半拍</a> 壹蘋果網絡<br />
<a href="http://member.nownews.com/newsflash/newsurl3.php?url=http://www.nownews.com/2008/05/02/545-2269301.htm" id="s-X5C50YVyOvFPNXge9ffz3A:u-AFrqEzeOEdz6zZNjB3WgPJhnmQxrgbNlKQ" target="_blank">優雅代言廠商透露林志玲小故事讓人感動紅了眼眶…</a> NOWnews<br />
<a href="http://news.gpwb.gov.tw/news.php?css=2&nid=42885&rtype=1" id="s-PuT-L3CJPd9yQ22gfVyweA:u-AFrqEzcTdCHSt7MPYuI2yFZxVH3VPfjhPw" target="_blank">軍事新聞網</a> - <a href="http://news.sina.com/sinacn/202-000-103-107/2008-05-02/2024528379.html" id="s-xfTFj-OYERxUixohd5ldOQ:u-AFrqEzexFrRJnmiU4vm-Fjs5DlVldzdlxw" target="_blank">新浪北美</a><br />
<a href="http://news.google.com.tw/nwshp?tab=wn&ned=tw&ncl=1160181886&hl=zh-TW&topic=e">所有 9 則相關新聞 »</a>
<p><a href="http://www.nytimes.com/2008/05/03/world/europe/03britain.html" id="s-4IthLo6s43fExpylwhZ_mg:u-AFrqEzcmli_A1dxsDraazzQnEQTRw6_0EQ:r-0-0_1142555348"><strong>Tory Beats Laborite to Become Mayor of London</strong></a><br />
<strong>New York Times - 1 hour ago</strong><br />
By SARAH LYALL LONDON - Boris Johnson, the floppy-haired media celebrity and Conservative member of Parliament who transformed himself from a shambling, amusing-aphorism-uttering figure of fun into a plausible political force, was elected mayor of <strong>...</strong><br />
<a href="http://news.bbc.co.uk/2/hi/7380947.stm" id="s-YdynOO1KE5YGlKFAdF2-yg:u-AFrqEzd_r8XBr4YibcRxzOXMI7p_qQ74fw">Johnson wins London mayoral race</a> BBC News<br />
<a href="http://ap.google.com/article/ALeqM5iueIorulWcBLTxZX0kY9VPtD71FgD90DS3M00" id="s-klF9FQo4q1vdL_opSr_kfA:u-AFrqEzfi-y66SCQBLJ4ARxLgA-nCCriz3A">Eccentric opposition lawmaker ousts Labour mayor of London</a> The Associated Press<br />
<a href="http://www.reuters.com/article/newsMaps/idUSL0372883120080503" id="s-z3GFpW13NDW3nf1jTTUqRQ:u-AFrqEzcxHgYffo_4EgfLh7tx1h9pChmClQ">Reuters</a> - <a href="http://washingtontimes.com/apps/pbcs.dll/article?AID=/20080503/FOREIGN/405210801/1001" id="s-o0BiaCxIdZIFJd7abGDGzA:u-AFrqEzdiDLiIaSyOHr3aMAQ_pVtKrHnqLw">Washington Times</a> - <a href="http://www.bloomberg.com/apps/news?pid=20601087&sid=akGHB2XffcnE&refer=home" id="s-s7H5pqn2VEC78y5U1S91kQ:u-AFrqEzevopG-oPJR7lwZHWqcNgeAb4ktow">Bloomberg</a> - <a href="http://www.timesonline.co.uk/tol/news/politics/article3865065.ece" id="s-4eHKY5KXnc0gKEYVHo3lbA:u-AFrqEzdURTkm0Cnmk2jKvvSwO_b3rdBFYg">Times Online</a><br />
<a href="http://news.google.com.tw/news?ned=us&ncl=1142555348&hl=en&topic=h"><strong>all 1,590 news articles »</strong></a></p>
</textarea>
</div>
<div>
<a id="diff_button" href="JavaScript:void(0)">比較(Diff)</a>
</div>
<hr/>
<div id="output_widget">
</div>
</body>
</html>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1497692-16");
pageTracker._trackPageview();
} catch(err) {}</script>
Be the First to comment.
About Author
DAVIDOU
一個不務正業，甚麼科技產品都玩的網路宅宅。 If you want to find me,that's easy! I will always on the Internet. so just find me, follow me. I will show you everything fun.
我的社群網路
