最近公司有個文本比對的功能模塊，于是在網上找了幾個文本比對的js插件，一開始用的是vue-code-diff，但是但文本數據比較大的時候，會發生卡頓，甚至網頁奔潰，后面使用codemirror，這個性能比較好，但是比對的呈現效果不太好，例如我另外一個文本中間新增了一行

?可以看到紅色波浪線并不是在我新增的這行，而是連帶了上面一行的末尾部分，這個效果并不是我想要的，于是去找文檔，發現codemirror的比對是源于google diff-match-patch插件的，調用的是diff-match-patch的diff_main方法，這個比對結果不一定對用戶友好，所以我們可以使用diff-match-patch里的diff_cleanupSemantic方法對diff_main的比對結果進行優化。

1、codemirror和diff-match-patch的使用

首先我們安裝兩個插件

npm install --save codemirror
npm install --save diff-match-patch

然后在你比對的頁面引入

然后定義一個元素

?

?最后初始化

可以調用實例方法進行更新值

這樣效果就出來了

?

2、優化比對結果

上面的比對效果并不是我們想要的，所以可以進行優化，我這邊選擇的是改動源碼

找到node_modules里的codemirror文件夾，然后找到引入的codemirror/addon/merge/merge.js文件，找到下面圖片地方，添加如下代碼

再找到node_modules下的diff-match-patch的index.js，在diff_cleanupSemantic方法的最后面，把結果return出去

?這樣，效果就變了

注意：當然，我們改過源碼的話，就可以把node_modules里的兩個插件拿出來當本地靜態資源引入，把codemirror和diff-match-patch文件夾放到同一個文件夾路徑下，然后修改merge.js里的?diff-match-patch引入路徑

?

第一次發表，不對的地方，還請各位大佬多多指教?

?

?

?

總結

以上是生活随笔為你收集整理的codemirror文本比对呈现效果不太准确的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。