Davidou的 Blog

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的比對的效果了

在這邊紀錄一下

程式碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!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">
&lt;a href="http://www.idn.com.tw/news/news_content.php?catid=2&amp;catsid=1&amp;catdid=0&amp;artid=20080502clc003" id="s-aYKoMqpcJD0HLvE5Hvof9Q:u-AFrqEzcmiutakICCISg67eWKaYHAZ4rIDg:r-1_1160181886" target="_blank"&gt;浪琴表母親節『讓愛傳承』慈善公益活動登場&lt;/a&gt;&lt;br /&gt;
 自立晚報 - 9小時前&lt;br /&gt;
 擁 有超過175年歷史的浪琴表對於投入全球公益活動一向不遺餘力，在母親節前夕推出以母愛如同和煦朝陽與溫柔月光為設計靈感之母親節限定錶款，於5月2日舉辦結合慈善公益之上市活動11，並將活動中義賣所得捐助給「東元文教基金會」，協助原住民 &lt;strong&gt;...&lt;/strong&gt;&lt;br /&gt;
 &lt;a href="http://1-apple.com.tw/index.cfm?Fuseaction=Article&amp;Sec_ID=7&amp;ShowDate=20080503&amp;IssueID=20080503&amp;art_id=30514063&amp;NewsType=1&amp;SubSec=82" id="s-1KvHFP26tD2KWoybgyxgYg:u-AFrqEzd1glvtB0oyUmBMaGL-Qhv7rPMZkQ" target="_blank"&gt;林志玲挺浪琴錶做公益打鼓慢半拍&lt;/a&gt; 壹蘋果網絡&lt;br /&gt;
 &lt;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"&gt;優雅代言廠商透露林志玲小故事讓人感動紅了眼眶…1111&lt;/a&gt; NOWnews&lt;br /&gt;
 &lt;a href="http://news.gpwb.gov.tw/news.php?css=2&amp;nid=42885&amp;rtype=1" id="s-PuT-L3CJPd9yQ22gfVyweA:u-AFrqEzcTdCHSt7MPYuI2yFZxVH3VPfjhPw" target="_blank"&gt;軍事新聞網&lt;/a&gt; - &lt;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"&gt;新浪北美&lt;/a&gt;&lt;br /&gt;
 &lt;a href="http://news.google.com.tw/nwshp?tab=wn&amp;ned=tw&amp;ncl=1160181886&amp;hl=zh-TW&amp;topic=e"&gt;所有 19 則相關新聞 »&lt;/a&gt;
 
&lt;p&gt;&lt;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"&gt;&lt;strong&gt;Tory Beats Laborite to Become Mayor of London&lt;/strong&gt;&lt;/a&gt;&lt;br /&gt;
 &lt;strong&gt;Times - 1 hour ago&lt;/strong&gt;&lt;br /&gt;
 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 &lt;strong&gt;...&lt;/strong&gt;&lt;br /&gt;
 &lt;a href="http://news.bbc.co.uk/" id="s-YdynOO1KE5YGlKFAdF2-yg:u-AFrqEzd_r8XBr4YibcRxzOXMI7p_qQ74fw"&gt;Johnson wins London mayoral race&lt;/a&gt; BBC News&lt;br /&gt;
 &lt;a href="http://ap.google.com/article/ALeqM5iueIorulWcBLTxZX0kY9VPtD71FgD90DS3M00" id="s-klF9FQo4q1vdL_opSr_kfA:u-AFrqEzfi-y66SCQBLJ4ARxLgA-nCCriz3A"&gt;Eccentric test opposition lawmaker ousts Labour mayor of London&lt;/a&gt; The Associated Press&lt;br /&gt;
 &lt;a href="http://www.reuters.com/article/newsMaps/idUSL0372883120080503" id="s-z3GFpW13NDW3nf1jTTUqRQ:u-AFrqEzcxHgYffo_4EgfLh7tx1h9pChmClQ"&gt;Reuters&lt;/a&gt; - &lt;a href="http://washingtontimes.com/apps/pbcs.dll/article?AID=/20080503/FOREIGN/405210801/1001" id="s-o0BiaCxIdZIFJd7abGDGzA:u-AFrqEzdiDLiIaSyOHr3aMAQ_pVtKrHnqLw"&gt;Washington Times&lt;/a&gt; - &lt;a href="http://www.bloomberg.com/apps/news?pid=20601087&amp;sid=akGHB2XffcnE&amp;refer=home" id="s-s7H5pqn2VEC78y5U1S91kQ:u-AFrqEzevopG-oPJR7lwZHWqcNgeAb4ktow"&gt;Bloomberg&lt;/a&gt; - &lt;a href="http://www.timesonline.co.uk/tol/news/politics/article3865065.ece" id="s-4eHKY5KXnc0gKEYVHo3lbA:u-AFrqEzdURTkm0Cnmk2jKvvSwO_b3rdBFYg"&gt;Times Online&lt;/a&gt;&lt;br /&gt;
&lt;a href="http://news.google.com.tw/news?ned=us&amp;ncl=1142555348&amp;hl=en&amp;topic=h"&gt;&lt;strong&gt;all 1,590 news articles »&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;
</textarea>
<textarea id="elm2" name="elm2" rows="15" cols="40">
&lt;a href="http://www.idn.com.tw/news/news_content.php?catid=2&amp;catsid=1&amp;catdid=0&amp;artid=20080502clc003" id="s-aYKoMqpcJD0HLvE5Hvof9Q:u-AFrqEzcmiutakICCISg67eWKaYHAZ4rIDg:r-1_1160181886" target="_blank"&gt;浪琴表母親節『讓愛傳承』慈善公益活動登場&lt;/a&gt;&lt;br /&gt;
 自立晚報 - 9小時前&lt;br /&gt;
 擁 有超過175年歷史的浪琴表對於投入全球公益活動一向不遺餘力，在母親節前夕推出以母愛如同和煦朝陽與溫柔月光為設計靈感之母親節限定錶款『燦陽繫情』、 『星月寄情』系列，於5月2日舉辦結合慈善公益之上市活動，並將活動中義賣所得捐助給「東元文教基金會」，協助原住民 &lt;strong&gt;...&lt;/strong&gt;&lt;br /&gt;
 &lt;a href="http://1-apple.com.tw/index.cfm?Fuseaction=Article&amp;Sec_ID=7&amp;ShowDate=20080503&amp;IssueID=20080503&amp;art_id=30514063&amp;NewsType=1&amp;SubSec=82" id="s-1KvHFP26tD2KWoybgyxgYg:u-AFrqEzd1glvtB0oyUmBMaGL-Qhv7rPMZkQ" target="_blank"&gt;林志玲挺浪琴錶做公益打鼓慢半拍&lt;/a&gt; 壹蘋果網絡&lt;br /&gt;
 &lt;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"&gt;優雅代言廠商透露林志玲小故事讓人感動紅了眼眶…&lt;/a&gt; NOWnews&lt;br /&gt;
 &lt;a href="http://news.gpwb.gov.tw/news.php?css=2&amp;nid=42885&amp;rtype=1" id="s-PuT-L3CJPd9yQ22gfVyweA:u-AFrqEzcTdCHSt7MPYuI2yFZxVH3VPfjhPw" target="_blank"&gt;軍事新聞網&lt;/a&gt; - &lt;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"&gt;新浪北美&lt;/a&gt;&lt;br /&gt;
 &lt;a href="http://news.google.com.tw/nwshp?tab=wn&amp;ned=tw&amp;ncl=1160181886&amp;hl=zh-TW&amp;topic=e"&gt;所有 9 則相關新聞 »&lt;/a&gt;
 
&lt;p&gt;&lt;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"&gt;&lt;strong&gt;Tory Beats Laborite to Become Mayor of London&lt;/strong&gt;&lt;/a&gt;&lt;br /&gt;
 &lt;strong&gt;New York Times - 1 hour ago&lt;/strong&gt;&lt;br /&gt;
 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 &lt;strong&gt;...&lt;/strong&gt;&lt;br /&gt;
 &lt;a href="http://news.bbc.co.uk/2/hi/7380947.stm" id="s-YdynOO1KE5YGlKFAdF2-yg:u-AFrqEzd_r8XBr4YibcRxzOXMI7p_qQ74fw"&gt;Johnson wins London mayoral race&lt;/a&gt; BBC News&lt;br /&gt;
 &lt;a href="http://ap.google.com/article/ALeqM5iueIorulWcBLTxZX0kY9VPtD71FgD90DS3M00" id="s-klF9FQo4q1vdL_opSr_kfA:u-AFrqEzfi-y66SCQBLJ4ARxLgA-nCCriz3A"&gt;Eccentric opposition lawmaker ousts Labour mayor of London&lt;/a&gt; The Associated Press&lt;br /&gt;
 &lt;a href="http://www.reuters.com/article/newsMaps/idUSL0372883120080503" id="s-z3GFpW13NDW3nf1jTTUqRQ:u-AFrqEzcxHgYffo_4EgfLh7tx1h9pChmClQ"&gt;Reuters&lt;/a&gt; - &lt;a href="http://washingtontimes.com/apps/pbcs.dll/article?AID=/20080503/FOREIGN/405210801/1001" id="s-o0BiaCxIdZIFJd7abGDGzA:u-AFrqEzdiDLiIaSyOHr3aMAQ_pVtKrHnqLw"&gt;Washington Times&lt;/a&gt; - &lt;a href="http://www.bloomberg.com/apps/news?pid=20601087&amp;sid=akGHB2XffcnE&amp;refer=home" id="s-s7H5pqn2VEC78y5U1S91kQ:u-AFrqEzevopG-oPJR7lwZHWqcNgeAb4ktow"&gt;Bloomberg&lt;/a&gt; - &lt;a href="http://www.timesonline.co.uk/tol/news/politics/article3865065.ece" id="s-4eHKY5KXnc0gKEYVHo3lbA:u-AFrqEzdURTkm0Cnmk2jKvvSwO_b3rdBFYg"&gt;Times Online&lt;/a&gt;&lt;br /&gt;
&lt;a href="http://news.google.com.tw/news?ned=us&amp;ncl=1142555348&amp;hl=en&amp;topic=h"&gt;&lt;strong&gt;all 1,590 news articles »&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;
</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.

Leave a 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.

文章分類
展開 | 收起
最新回應
我的社群網路
plurk plurk github kunlex