首页 > 其他分享 >diff.js+diff2html-ui.js 使用实例

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

时间:2024-08-22 16:39:49浏览次数:12  
标签:xml const IDIP diff2html part ui diff 8ball js

<!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/[email protected]/dist/diff.min.js"></script>
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/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>

标签:xml,const,IDIP,diff2html,part,ui,diff,8ball,js
From: https://www.cnblogs.com/kaikaiya/p/18374182

相关文章

  • nextjs 客户端图片 因跨域 strict-origin-when-cross-origin 无法展示
    使用next.config.js配置跨域规则Next.js提供了一个配置文件next.config.js,你可以在其中配置images选项,以允许跨域加载图片。在Next.js中,remotePatterns配置用于定义允许加载远程图像的域名及路径。不过,remotePatterns并不支持传统的正则表达式,而是使用类似正则表达式......
  • Uruguay Immigration Requirements
    Uruguayoffersarelativelystraightforwardimmigrationprocess,especiallyforthoselookingtoresideinthecountrylong-term.Herearesomegeneralrequirements:1.TouristVisaCitizensfrommanycountries(liketheUS,EU,andCanada)donotrequir......
  • 创新实践:流媒体服务器如何推动WebRTC支持H.265及JS硬软解码(MSE硬解、WASM软解)
    为了实现这一全面的解决方案,我们投入了近半年的时间进行调研与研发。我们的主要目标是:让流媒体服务器能够直接传输H.265编码的视频,而无需将其转码为H.264,从而使Chrome浏览器能够无缝解码并播放H.265视频。值得注意的是,目前市场上许多软硬件产品仍采用将H.265转码为H.264的......
  • Jenkins从2.401.1升级到2.440.1后项目配置报错,提示:JSONObject["scm"] is not a JSONOb
    因为安全原因升级了Jenkins。然后发现Project-->Configure那里配置竟然嵌套了,而且保存修改的时候,提示:JSONObject["scm"]isnotaJSONObject. 异常信息表明在JSON中尝试获取一个名为“scm”的属性时,期望得到的是一个JSONObject,但实际上并不是。可能是因为JSON中的......
  • build linux kernel
    https://www.kernel.org/doc/html/latest/translations/zh_CN/admin-guide/README.htmlhttps://www.kernel.org/https://docs.kernel.org/6.8/安装内核源代码如果您要安装完整的源代码,请把内核tar档案包放在您有权限的目录中(例如您的主目录)并将其解包:xz......
  • 原生js实现下滑到当前模块进度条填充
    <divstyle="height:1500px;"></div><divclass="progress-container"><divclass="progress-bar"data-progress="90%"><pclass="progress-text">GoogleAds在Google搜索引擎上覆盖超过90%......
  • 基于ssm+vue.js的校园二手交易平台附带文章和源代码设计说明文档ppt
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我成功案例代码参考数据库参考源码获取前言......
  • 安裝ComfyUI-Docker & 下載Model & Krita電繪軟件 & krita-ai-diffusion電繪插件 & AU
    1.0安裝ComfyUI-Dockergitclonehttps://github.com/YanWenKun/ComfyUI-Docker下載ComfyUI-Docker。sudochmod-R777*設置ComfyUI-Docker最高讀寫權限。dockerrmcomfyuidockerpullyanwk/comfyui-boot:latest下載Docker鏡像。mkdir./Comfy......
  • 02-HTML&JS相关练习
    1、使用html写一个网页,要求满足以下条件:(1)网页中含有任意一张图片,图片路径使用绝对路径(这里绝对路径无法识别故使用相对路径),鼠标悬停在图片时出现“马哥教育”文本,且点击图片可跳转至马哥教育官方页面(2)网页中包含账号、密码登录,且账号提前定义好是admin且不可更改,输入密码时......
  • 基于 FastAPI+Vue.js 构建的食谱管理平台
    1.2自托管的食谱管理平台:Mealie主语言:Python,Star:6.1k,周增长:400该项目是基于FastAPI+Vue.js构建的食谱管理平台。它提供了简洁友好的界面,用户可以在线编辑和管理食谱,并通过简单的操作从多种来源(URL)导入食谱内容,支持膳食计划、购物清单、多语言、API集成和Docker部署等功能......