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

最近有个需求为只展示一个字段变更前和变更后变化的部分,新增为红色,删除的灰色加上删除线展示,最终效果如下:

 其实本质上就是两个文本的diff,找到新增的和删除的然后加上样式,这里用的库为diff_match_patch

1.install

npm i diff_match_patch -S

2.初始化

这个库提供了一个构造函数diff_match_patch,返回一个diff实例供我们使用他的api,官方有很多方法,这里需求只用到了它的字符串对比:

 diff_main方法提供了两个入参为需要对比的字符串,返回一个二维数组,数组的第一项为内容类型,0为公共的也就是没有变化的部分,1为新增,2为删除的,因此,我们可以对其进行封装

3.封装

在utils文件夹下建立一个diff.js工具类.用来封装:

// 因为导出的构造函数为下划线命名,这里改为驼峰
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
            );

将比较好的diffResults这个二维数组进行解析拼接成富文本: 

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("");
};

提前定义好高亮的样式,然后进行拼接即可