Logo

diff.js+diff2html-ui.js 使用实例

photo

2025年05月04日

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件差异对比</title>
    <link rel="stylesheet" href="https://unpkg.com/diff2html/bundles/css/diff2html.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #result {
            border: 1px solid #ddd;
            padding: 10px;
            margin-top: 20px;
            overflow: auto;
        }
    </style>
</head>
<body>
<h1>对比远程文件与本地文本差异</h1>
<div>
    <textarea id="localText" rows="10" cols="50" placeholder="输入本地文本..."></textarea>
</div>
<button id="compareBtn">比较</button>
<div id="result"></div>

<script src="https://cdn.jsdelivr.net/npm/diff@5.0.0/dist/diff.min.js"></script>
<script src="
https://cdn.jsdelivr.net/npm/diff2html@3.4.48/bundles/js/diff2html-ui.min.js
"></script>
<script>
    document.getElementById('compareBtn').addEventListener('click', function() {
        const remoteFileUrl = 'http://idipportal-dev.ied.com/data/8ball_IDIP_20240821_238.xml'; // 替换为目标远程文件的 URL
        const localText = document.getElementById('localText').value;

        // 使用 Fetch API 获取远程文件内容
        fetch(remoteFileUrl)
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络错误');
                }
                return response.text();
            })
            .then(remoteText => {
                // 使用 Diff.js 计算差异
                const diff = Diff.diffLines(remoteText,localText);

                // 将 diff 转换为 Diff2Html 所需的格式
                let addedCount = 0;
                let removedCount = 0;
                const ttdiffString = diff.map(part => {
                    const prefix = part.added ? '+' : part.removed ? '-' : ' ';
                    // 更新计数器
                    if (part.added) {
                        addedCount += part.count || part.value.split('\n').length; // 计算添加的行数
                    }
                    if (part.removed) {
                        removedCount += part.count || part.value.split('\n').length; // 计算删除的行数
                    }
                    return part.value.split('\n').map(line => `${prefix}${line}`).join('\n');
                }).join('\n');

                const diffString = `diff --git a/8ball_IDIP_20240821_238.xml b/8ball_IDIP_20240821_238.xml
index 0000001..0ddf2ba
--- a/8ball_IDIP_20240821_238.xml
+++ b/8ball_IDIP_20240821_238.xml
@@ -${removedCount} +${addedCount} @@
${ttdiffString}
`;

                var targetElement = document.getElementById('result');
                var configuration = {
                    drawFileList: false,
                    fileListToggle: false,
                    fileListStartVisible: false,
                    fileContentToggle: false,
                    matching: 'lines',
                    outputFormat: 'side-by-side',
                    synchronisedScroll: true,
                    highlight: true,
                    renderNothingWhenEmpty: false,
                };
                var diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
                diff2htmlUi.draw();
                diff2htmlUi.highlightCode();
            })
            .catch(error => {
                console.error('获取远程文件失败:', error);
                document.getElementById('result').innerText = '错误: ' + error.message;
            });
    });
</script>
</body>
</html>

参考文档:

https://github.com/rtfpessoa/diff2html-cli

https://github.com/kpdecker/jsdiff#change-objects

https://www.cnblogs.com/kaikaiya/p/18374182

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它
所有附件
该文章没有附件.
本文为原创文章,请注意保留出处!

留言板

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

在现代的Web应用程序中,提供自动语言检测功能可以显著提升用户体验。本文将介绍如何实现一个具有自动语...实现一个自动语言检测的翻译工具

热门文章

无法握住的故土 在我们心灵最温暖的角落,总有一寸土地是属于故乡的。虽然我们看似已远离故土,可骨子里对故乡的依恋却是从未冷却过。我们无论漂泊他乡,还是在繁华都市平步青云,可故乡的悠悠情思总会潜入梦乡与你缠绵。是儿时那一缕缕茉莉的清香萦绕在梦境,也是邻家那已锈迹斑斑的铁壶里,开出艳丽的花儿在梦的边缘摇曳。故土就这样根深蒂固地在我们的灵魂深处烙下深深的印记。 作者:Pastore Antonio
1596 浏览量
EWS(Exchange Service)基本使用(获取个人会议,会议室会议内容,会议室列表,发送会议,修改会议,删除会议) 最近公司要求和exchange服务对接,所以稍微研究了一下官方文档,做出以下总结,欢迎大家补充。先...EWS(ExchangeService)基本使用(获取个人会议,会议室会议内容,会议室列表,发送会议,修改会议,删除会议) 作者:Pastore Antonio
1585 浏览量
Sql Server 部署SSIS包完成远程数据传输 本篇介绍如何使用SSIS和作业完成自动更新目标数据任务。**温馨提示:如需转载本文,请注明...SqlServer部署SSIS包完成远程数据传输 作者:Pastore Antonio
1579 浏览量
SQL Server AG集群启动不起来的临时自救大招 背景前晚一朋友遇到AG集群发生来回切换不稳定的情况,情急之下,朋友在命令行使用命令重启WSFC集群...SQLServerAG集群启动不起来的临时自救大招 作者:Pastore Antonio
1573 浏览量
windows 下安装 memcahce 官网上并未提供Memcached的Windows平台安装包,我们可以使用以下链接来下载,你需...windows下安装memcahce 作者:Pastore Antonio
1566 浏览量