想实现找字符串不同的功能,找到一个diff包,功能还挺全,官方示例使用的是这样:
const Diff = require('diff');
const diff = Diff.diffChars(one, other);
但是在vue+vite中使用就不能用require。
进入diff的包找到了解决办法。(我用的是5.1.0,更早的版本不确定能不能这样用)
在vue中这样引入
import {Diff} from 'diff';
使用:
var characterDiff = new Diff();
function diffChars(oldStr, newStr, options) {
return characterDiff.diff(oldStr, newStr, options);
}
diffChars(oriText, resText,{}).forEach(
function(part){
console.log(part)
if(part.added) {
part.value = "<span style='color:#2D93CA;font-size:16px;'>" + part.value + "</span>"
}}
);
其他的功能类似,要到diff包中的lib/index.mjs文件中找new Diff()前后的代码,结合/lib/diff中的相应功能代码自己进行改写。