js实现文本比较差异

内部系统上线了一个发版记录发版内容的功能。维护发版记录的同事提出一个可以展示前后文本差异的优化需求。使的每次变更前可以确认新增了哪些，或者删除了哪些内容。项目使用react。

另外，互联网面试前刷八股+leetCode已经是约定俗成的事情的，但一直觉得刷算法题只是为了应付面试。但是这个任务意识到之所以用不到，是因为习惯了三方库，没有三方库，这些算法很有用。

预期结果

引入第三方插件jsdiff

github地址

官方demo

基本用法：

js 复制代码

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为例，项目中按需引入如下：

js 复制代码

import { diffChars } from "diff";

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

js 复制代码

 // .....
    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>标签包裹才能保持文本的展示格式。如下

js 复制代码

    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)

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

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