React项目中利用jsdiff实现文本差异对比功能

内部系统上线了发版记录与内容管理功能。维护人员提出优化需求，希望增加前后文本差异展示功能，以便在每次变更前确认新增或删除的具体内容。该项目基于React框架开发。

互联网面试中，刷算法题和常见面试题已成为惯例，但通常认为这些算法仅用于应付面试。然而，本次任务让人意识到，脱离第三方库后，掌握这些算法对于实际开发具有重要价值。

预期结果

引入第三方插件jsdiff

github地址

官方demo

基本用法：

npm install diff --save

根据官方demo，常见的用法有三种：

分别对应提供的方法如下：

• Diff.diffChars(oldStr, newStr[, options]) 

• Diff.diffWords(oldStr, newStr[, options]) 

• Diff.diffWordsWithSpace(oldStr, newStr[, options])

• Diff.diffLines(oldStr, newStr[, options]) 

以diffChars为例，项目中按需引入如下：

import { diffChars } from "diff";

在项目中将其提取成一个组件：

 // .....
    const { oldStr, newStr } = props;

    useEffect(() => {
        const diff = diffChars(oldStr, newStr);
        console.log(diff, newStr);
        let span = null;
        const fragment = document.createDocumentFragment();
        const display = document.getElementById('content');
        diff.forEach((part) => {
            const color = part.added ? 'green' :
              part.removed ? 'red' : 'grey';
            span = document.createElement('span');
            span.style.color = color;
            if (color == "red") {
                span.style.textDecoration = "line-through";
            }
            if (color == "green") {
                span.style.background = "#48ff00";
            }
            span.appendChild(document
              .createTextNode(part.value));
            fragment.appendChild(span);
          });
          display.appendChild(fragment);
    }, [oldStr, newStr]);

//.....

对于接受展示内容的外层容器来说，需要注意： 对于换行符号 \n 需要使用<pre>标签包裹才能保持文本的展示格式。如下

    return <>
        <pre><div id="content"></div></pre>
    </>;

关于jsdiff算法

An O(ND) Difference Algorithm and Its Variations

Eugene W. Myers • Algorithmica • Published 1986

The problems of finding a longest common subsequence of two sequences A and B and a shortest edit script for transforming A into B have long been known to be dual problems. In this paper, they are shown to be equivalent to finding a shortest/longest path in an edit graph. Using this perspective, a simple O(ND) time and space algorithm is developed where N is the sum of the lengths of A and B and D is the size of the minimum edit script for A and B. The algorithm performs well when differences are small (sequences are similar) and is consequently fast in typical applications. The algorithm is shown to have O(N +D expected-time performance under a basic stochastic model. A refinement of the algorithm requires only O(N) space, and the use of suffix trees leads to an O(NlgN +D ) time variation.

从上面的描述可知，这个算法的空间复杂度是O(N),时间复杂度是O(nLgN)

刷题常见的[求两个字符串中最大子串及最大子序列]以及[最短编辑距离问题]

从这个库可知，这些算法很有用。

以上就是JS实现文本比较差异的示例代码的详细内容，更多关于JS文本比较的资料请关注本站其它相关文章！