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

编程乐趣 · 2025-9-4 19:42:20

PLC技术网抖音群

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

项目简介

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

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

技术架构

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

2、开发工具：Visual Studio 2017

项目结构

使用方法

对比Html片段

var oldText = @"This is some sample text to demonstrate the capability of the HTML diff tool.
It is based on the Ruby implementation found here. Note how the link has no tooltip
What about a number change: 123456?
Some sample text Some sample value
Data 1 (this row will be removed) Data 2
                    Here is a number 2 32


                    This date: 1 Jan 2016 is about to change (note how it is treated as a block change!)";
var newText = @"This is some sample text to demonstrate the awesome capabilities of the HTML diff tool.


Extra spacing here that was not here before.
It is based on the Ruby implementation found here. Note how the link has a tooltip now and the HTML diff algorithm has preserved formatting.
What about a number change: 123356?
Some sample bold text Some sample value
                    Here is a number 2 ³²


                    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;
}