beyond compare 2 导出html调整

参见前文 beyond compare 原始导出的 html 有很多不便之处：

 

 

原始方案：

1.结构为

<table> 

<!--
两个文件同一行
-->
<tr>
<td>
文件1该行内容
</td>
<td>
文件2该行内容
</td>
</tr>

<tr>
<td>
</td>
<td>
</td>
</tr>

....

</table>

 

的格式，比较冗余，采用行方式强制保证，两个文件的同一行比较结果对其。

2.由于采用 tr 对同一行进行对其，那么当文件很长时，滚动条会出现在浏览器窗口，且没有各个文件窗口内部的同步纵向横向滚动条（参见 ultracompare ）,即使经过优化仍然会出现横向，纵向滚动条不能同时出现在浏览器中的情况，对比很不方便了。

只能从根本上改变结果 html 的结构格式着手，好在 bc 也提供了 xml 格式的比较结果，那么可以自己构建任意的 html 结构

 

改进方案：

改进结构：

<table>
<tr>

<td>
<div>
<p></p>
...
</div>
</td>

<td>
<div>
<p></p>
...
</div>
</td>

</tr>
</table>

 

1.不再使用 tr 进行不同文件同行对比结果的对其，而是使用 div 内 p 的对其来表示。
2.那么可以设置 两个 div 的高度宽度，使得其不超过浏览器窗口,并且通过 js 控制两个 div 同步滚动。
3.关键在两个字符串 conflict 字串的显示问题，由于导出 xml 没有说明两个串的不同子串位置，重点在于使用 LCS 的动态规划解法找出最长公共序列，并对两个字符串内的连续的公共序列进行高亮。