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

说到对比两个文件差异，对于我们程序员来说，可以说是天天碰到。我们经常需要对比两份代码是否不同。但今天给大家推荐的是，一个对比两份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 textSome 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 textSome sample value

                    Here is a number 2 32

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

项目地址：https://github.com/Rohland/htmldiff.net

- End -

推荐阅读

• 一个基于EntityFrameworkCore+Lucene实现的全文搜索引擎库

• 一个UWP 框架开发的哔哩哔哩非官方应用

• 一个C#开发的Windows远程桌面工具

• .NET5.0和Quartz.NET开发的极简任务调度平台

• 一套.Net6可落地的微服务、分布式开源项目

专注分享编程知识、热门有用有趣的开源项目