Vue如何比较字符串变化并高亮变化的部分
作者：williamyi74
这篇文章主要介绍了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("");
};提前定义好高亮的样式，然后进行拼接即可
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。