基于.Net开发的对比Html效果差异的开源项目

最新推荐文章于 2023-08-22 10:36:14 发布

编程乐趣

最新推荐文章于 2023-08-22 10:36:14 发布

阅读量310

点赞数 1

分类专栏： .NetCore开源项目100例文章标签： html 开源 javascript

本文链接：https://blog.csdn.net/daremeself/article/details/127232791

版权

.NetCore开源项目100例专栏收录该内容

174 篇文章 73 订阅

订阅专栏

说到对比两个文件差异，对于我们程序员来说，可以说是天天碰到。我们经常需要对比两份代码是否不同。但今天给大家推荐的是，一个对比两份Html代码最终效果差异的项目。

项目简介

一个基于.Net 4.5开发的对比Html文件、片段效果差异的项目。两份Html效果不一样的地方会通过颜色、删除线、背景色分别标记出来。

该项目使用场景一般是针对一些文章排版、错别字显示等情况，项目比较简单，感兴趣的可以了解下。

技术架构

1、平台：基于.Net Framework 4.5、netstandard2.0开发

2、开发工具：Visual Studio 2017

项目结构

使用方法

对比Html片段

var oldText = @"<p><i>This is</i> some sample text to <strong>demonstrate</strong> the capability of the <strong>HTML diff tool</strong>.</p>
<p>It is based on the <b>Ruby</b> implementation found <a href='http://github.com/myobie/htmldiff'>here</a>. Note how the link has no tooltip</p>
<p>What about a number change: 123456?</p>
<table cellpadding='0' cellspacing='0'>
<tr><td>Some sample text</td><td>Some sample value</td></tr>
<tr><td>Data 1 (this row will be removed)</td><td>Data 2</td></tr>
</table>
                    Here is a number 2 32
<br><br>
                    This date: 1 Jan 2016 is about to change (note how it is treated as a block change!)";

var newText = @"<p>This is some sample <strong>text to</strong> demonstrate the awesome capabilities of the <strong>HTML <u>diff</u> tool</strong>.</p><br/><br/>Extra spacing here that was not here before.
<p>It is <i>based</i> on the Ruby implementation found <a title='Cool tooltip' href='http://github.com/myobie/htmldiff'>here</a>. Note how the link has a tooltip now and the HTML diff algorithm has preserved formatting.</p>
<p>What about a number change: 123356?</p>
<table cellpadding='0' cellspacing='0'>
<tr><td>Some sample <strong>bold text</strong></td><td>Some sample value</td></tr>
</table>
                    Here is a number 2 <sup>32</sup>
<br><br>
                    This date: 22 Feb 2017 is about to change (note how it is treated as a block change!)";

var diffHelper = new HtmlDiff.HtmlDiff(oldText, newText);
litOldText.Text = oldText;
litNewText.Text = newText;

// Lets add a block expression to group blocks we care about (such as dates)
diffHelper.AddBlockExpression(new Regex(@"[\d]{1,2}[\s]*(Jan|Feb)[\s]*[\d]{4}", RegexOptions.IgnoreCase));

litDiffText.Text = diffHelper.Build();

效果

通过效果图，我们可以看出：

1、不一样的地方，通过橙色背景色标记；

2、增加的地方，通过绿色背景色标记；

3、删除的地方，通过粉色背景色+删除线标记。

自定义对比效果

标记效果，也可以自定义，只需在Css文件修改样式

/* ***************************************
** Diff related styles
*****************************************/

ins {
background-color: #cfc;
text-decoration:inherit;

}

del {
color: #999;
background-color:#FEC8C8;
}

ins.mod {
background-color: #FFE1AC;
}