JS如何实现两个文本的差异 2024-07-23

使用过git的同学都清楚，当我们有内容更改时，我们使用git diff命令就可以查修改的内容的差异，这非常直观有用。

在开发MindPress时，也会遇到内容的修改，我希望在修改后显示与原文档之间的差异。如何在Web上实现git diff类似的功能。

差异库

第一步，我们需要比较两个文件的差异，这里可以用到 jsdiff 这个库。在使用这个库的时候，我们可以调用以下方法创建 unified diff patch，这种 unified diff patch 在后续可以更加直观展示：

Diff.createTwoFilesPatch(oldFileName, newFileName, oldStr, newStr[, oldHeader[, newHeader[, options]]])
Diff.createPatch(fileName, oldStr, newStr[, oldHeader[, newHeader[, options]]])

这两种方法比较类似，对于我的项目里，使用如下：

import * as Diff from 'diff'
const diff = Diff.createPatch('filename', 'abc ', 'abc \n ad')

美化显示

使用了上面的差异库后，我们需要对diff做显示上的美化，可以采用 diff2html 这个库。使用Diff2Html.html这个方法。

在我的项目里，js的代码如下

import * as Diff2Html from 'diff2html';
import { ColorSchemeType } from "diff2html/lib/types"
import 'diff2html/bundles/css/diff2html.min.css';
this.diffHtml = Diff2Html.html(diff, {
                    drawFileList: true,
                    matching: 'lines',
                    outputFormat: 'side-by-side',
                    colorScheme: ColorSchemeType.AUTO,
                });

这里的第一个传入参数diff就是上面Diff.createPatch创建的unified diff patch 。这个函数生成一个html dom，在vue里可将这个dom挂在html里，我的html代码如下（vue）

<div class="p-4 w-100" id="outputHtml"
                :style="`max-height: calc(100vh - ${heightExp}px - 10px);overflow: auto;`">
                <section id="diffHtml" v-html="diffHtml"></section>
</div>

差异化效果

最后得到的效果如下：

image.png

源代码见：
https://github.com/aborn/mindpress/blob/markdown/mindpress-fe/components/MagicEditor.vue