內部系統(tǒng)上線了一個發(fā)版記錄發(fā)版內容的功能。維護發(fā)版記錄的同事提出一個可以展示前后文本差異的優(yōu)化需求。 使的每次變更前可以確認新增了哪些，或者刪除了哪些內容。項目使用react。

另外，互聯(lián)網(wǎng)面試前刷八股+leetCode已經(jīng)是約定俗成的事情的，但一直覺得刷算法題只是為了應付面試。但是這個任務意識到之所以用不到，是因為習慣了三方庫，沒有三方庫，這些算法很有用。

預期結果

引入第三方插件jsdiff

github地址

官方demo

基本用法：

npm install diff --save

根據(jù)官方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實現(xiàn)文本比較差異的示例代碼的詳細內容，更多關于JS文本比較的資料請關注腳本之家其它相關文章！

最新評論