随着前端技术的不断发展，我们在前端的工作中经常会涉及到处理两个不同文本的差异，并需要更好地展示差异。而 Differo 就是一个解决文本差异问题的 npm 包，它具有异步处理和多样性等优点，通过本篇文章，您将学会如何使用 Differo。
Differo 是什么？
Differo 是一个基于 JavaScript 的差异文本工具，通过比较两段文本的差异，可以轻松地将其可视化。它可以将差异结果以 HTML 格式输出，提供了多种不同的样式供选择，并且支持异步执行。
除了在前端开发过程中处理文本差异问题，Differo 还可以在其他场景下使用。例如，在后端处理 git diff 差异时，可以使用 Differo 将结果转换为 HTML 格式，方便查看。
如何安装
在使用 Differo 之前，您需要先拥有 npm 环境。使用 npm 命令，我们可以轻松地完成 Differo 的安装：
$ npm install differo --save
如何使用
在安装完成后，我们就可以在项目中引入并使用 Differo 了。以下是一些基本的用法和示例。
使用 diff 工具比较两段文本
首先，让我们使用 Differo 的 diff 工具来比较两段文本，并且输出它们的差异信息。
const { diff } = require('differo')
const oldText = 'The quick brown fox jumps over the lazy dog.'
const newText = 'The quick brown cat jumps over the lazy dog.'
const diffResult = await diff(oldText, newText)
console.log(diffResult)在这个例子中，我们比较了两个字符串。diff 返回一个 Promise 对象，因为此过程是异步的。我们使用 await 关键字来等待 diff 结果，并将其赋值给变量 diffResult。最后，我们将结果输出到控制台中进行查看。
diffResult 的输出结果如下：
-- -------------------- ---- -------
-
----- -
- ------ ---- ----- ----- - --
- ----- --------- ------ ----- --
- ------ - - --
- ----- --------- ------ ----- --
- ------ - ----- ---- --- ---- ----- -
--
------ -
- ------ ---- ----- ----- - --
- ----- --------- ------ ----- --
- ------ - ----- ---- --- ---- ----- -
-
-其中，left 和 right 分别表示比较结果中两段文本的不同之处。比如，left 中的 { type: 'delete', value: 'fox' } 表示在 oldText 中删除了单词 ‘fox’。
使用 generateHtml 把 diffResult 转换成 HTML 格式
接下来，我们把 diffResult 转换成 HTML 格式，并以内联样式展示出来。
-- -------------------- ---- -------
----- - ------------ - - ------------------
----- ------- - ---- ----- ----- --- ----- ---- --- ---- -----
----- ------- - ---- ----- ----- --- ----- ---- --- ---- -----
----- ---------- - ----- ------------- --------
----- ---- - ------------------------ -
------- -
------- ------------------ ----- ------ -------
------- ------------------ ----- ------ -------
------ ------------------ ------ ------ -------
-
--
-----------------在这一步，我们使用了 Differo 的 generateHtml 工具。它的第一个参数是 diff 结果，第二个参数是样式配置。在这里我们传入了一个内联样式的配置，其中包含了 text 删除 delete、text 插入 insert 和原样式 equal，它们分别代表了 diff 中的操作类型。
generateHtml 函数返回一个 HTML 字符串，其中使用 CSS 样式来突出显示差异。通过输出结果，我们可以清晰地看到 oldText 和 newText 的差异。此时，其中的删除部分被淡红色的背景和红色字体突出显示，而插入文本则会用淡绿色的背景和绿色字体标记。其余文本使用默认样式。
下面是差异HTML的例子：
<span style="background-color: white; color: black;">The quick brown </span><span style="background-color: #fbb; color: #911;">fox</span><span style="background-color: white; color: black;"> jumps over the lazy dog.</span> <span style="background-color: white; color: black;">The quick brown </span><span style="background-color: #bfb; color: #191;">cat</span><span style="background-color: white; color: black;"> jumps over the lazy dog.</span>
样式定制
除了上文中出现的内联样式外，Differo 还提供了多种灵活的样式配置方式，可以轻松地满足您的不同需求。以下是一些样式定制的示例代码：
使用 class 名称
-- -------------------- ---- -------
----- - ------------ - - ------------------
----- ------- - ---- ----- ----- --- ----- ---- --- ---- -----
----- ------- - ---- ----- ----- --- ----- ---- --- ---- -----
----- ---------- - ----- ------------- --------
----- ---- - ------------------------ -
------- -
------- ------
------- ------
------ --
-
--
-----------------在这个例子中，我们使用了自定义的 class 名称，而非内联样式。这种方法可以更好的适应通用样式及样式管理。
使用全局样式
-- -------------------- ---- ------- -------------- - ----------------- ------ ------ ------ - --------------- - ----------------- ----- ------ ----- - --------------- - ----------------- ----- ------ ----- -
-- -------------------- ---- -------
----- - ------------ - - ------------------
----- ------- - ---- ----- ----- --- ----- ---- --- ---- -----
----- ------- - ---- ----- ----- --- ----- ---- --- ---- -----
----- ---------- - ----- ------------- --------
----- ---- - ------------------------ -
------- -
------- -----------------
------- -----------------
------ ---------------
-
--
-----------------在这个例子中，我们使用了全局样式。全局样式适用于您的项目中样式库的集中管理，这样可以方便进行样式的调整。
结论
Differo 作为一款前端差异文本工具，可以帮助我们轻松地处理文本差异，并将结果通过 HTML 格式展示出来。在本文中，我们介绍了如何使用 Differo，包括安装、用法及样式定制。希望本文对大家能有所帮助，也希望使用过 Differo 的同学们可以分享一下您的使用心得。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566be81e8991b448e30cd