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

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

預(yù)期結(jié)果

引入第三方插件jsdiff

github地址

官方demo

基本用法：

npm install diff --save

根據(jù)官方demo，常見(jiàn)的用法有三種：

分別對(duì)應(yīng)提供的方法如下：

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

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

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

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

以diffChars為例，項(xiàng)目中按需引入如下：

import { diffChars } from "diff";

在項(xiàng)目中將其提取成一個(gè)組件：

 // .....
    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]);

//.....

對(duì)于接受展示內(nèi)容的外層容器來(lái)說(shuō)，需要注意： 對(duì)于換行符號(hào) \n 需要使用<pre>標(biāo)簽包裹才能保持文本的展示格式。如下

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

關(guān)于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.

從上面的描述可知，這個(gè)算法的空間復(fù)雜度是O(N),時(shí)間復(fù)雜度是O(nLgN)

刷題常見(jiàn)的[求兩個(gè)字符串中最大子串及最大子序列]以及[最短編輯距離問(wèn)題]

從這個(gè)庫(kù)可知，這些算法很有用。

以上就是JS實(shí)現(xiàn)文本比較差異的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于JS文本比較的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論