Vue如何比较字符串变化并高亮变化的部分

npm i diff_match_patch -S

// 因为导出的构造函数为下划线命名,这里改为驼峰
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 上一次的内容
         * @param {String} currentText 这次要diff的内容
         * @return {{Array.<Array.<number|string>>}} diff后的结果 为一个二维数组
         */
        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
            );

import { CHANGE_EVENT_TYPE } from "@/constant/services/detail";
import { DOG_TEXT, DOG_TYPE } from '@/constant/services/detail';
import diff from "@/utils/diff";
 
/**
 * 高亮变更的内容
 * @param {{Array.<Array.<number|string>>}} diffResults diff后的结果 为一个二维数组
 * @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("");
};