Vue如何比較字符串變化并高亮變化的部分

更新時間：2023年12月29日 08:40:22 作者：williamyi74

這篇文章主要介紹了Vue如何比較字符串變化并高亮變化的部分問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

1.install

npm i diff_match_patch -S

2.初始化

這個庫提供了一個構造函數(shù)diff_match_patch，返回一個diff實例供我們使用他的api，官方有很多方法

這里需求只用到了它的字符串對比：

diff_main方法提供了兩個入?yún)樾枰獙Ρ鹊淖址?，返回一個二維數(shù)組，數(shù)組的第一項為內(nèi)容類型，0為公共的也就是沒有變化的部分，1為新增，2為刪除的，因此，我們可以對其進行封裝

3.封裝

在utils文件夾下建立一個diff.js工具類.用來封裝：

// 因為導出的構造函數(shù)為下劃線命名,這里改為駝峰
import { diff_match_patch as DiffMatchPatch } from 'diff_match_patch';
 
const createDiffMatchPatch = () => {
    const diffMatchPatch = new DiffMatchPatch();
    const DIFF_IDENTIFIER = {
        INSERTION: 1, // 新增的
        DELETION: -1, // 刪除的
        EQUALITY: 0, // 公共的
    }
    return {
        DIFF_IDENTIFIER,
        /**
         * diff字符串的變更
         * @param {String} prevText 上一次的內(nèi)容
         * @param {String} currentText 這次要diff的內(nèi)容
         * @return {{Array.<Array.<number|string>>}} diff后的結(jié)果 為一個二維數(shù)組
         */
        diffText(prevText, currentText) {
            const diffResults = diffMatchPatch.diff_main(prevText, currentText);
            return diffResults;
        },
    }
}
// 初始化后導出
export default createDiffMatchPatch();

使用時直接導入：

import diff from "@/utils/diff";
            const diffResults = diff.diffText(
              record.prevDetail,
              record.currentDetail
            );

將比較好的diffResults這個二維數(shù)組進行解析拼接成富文本：

import { CHANGE_EVENT_TYPE } from "@/constant/services/detail";
import { DOG_TEXT, DOG_TYPE } from '@/constant/services/detail';
import diff from "@/utils/diff";
 
/**
 * 高亮變更的內(nèi)容
 * @param {{Array.<Array.<number|string>>}} diffResults diff后的結(jié)果 為一個二維數(shù)組
 * @return {String} 返回高亮的富文本片段
 */
const useHighlightCurrentDetail = (diffResults) => {
    const richTextFragments = [];
    const { DIFF_IDENTIFIER } = diff;
    for (let i = 0; i < diffResults.length; i++) {
        const [identifier, text] = diffResults[i];
        switch (identifier) {
            case DIFF_IDENTIFIER.INSERTION:
                richTextFragments.push(`<em class="highlight-insertion">${text}</em>`);
                break;
            case DIFF_IDENTIFIER.DELETION:
                richTextFragments.push(`<del class="highlight-deletion">${text}</del>`);
                break;
            case DIFF_IDENTIFIER.EQUALITY:
                richTextFragments.push(text);
                break;
            default:
                break;
        }
    }
    return richTextFragments.join("");
};

提前定義好高亮的樣式，然后進行拼接即可