vue-diff 对比两个 html 字符串

合并两个 html 字符串, 不删除两边任何字符, 合并所有修改、删除、新增部分并标记

参数: perv: string current: string 返回: 合并的 html 字符串

concatHTML(prev, current)

对比两个 html 字符串，对新增部分进行标记

参数: perv: string current: string 返回: 两个 html 字符串不同部分的字符串(新增部分添加节点进行标识)

diffScreens(prev, current)

两屏对比不要颜色

参数: html1: string html2: string 返回: 合并后的 html: str

concatHTMLWithoutColor(html1: string, html2: string)

两屏对比塞入颜色

参数: html1: string html2: string 返回: { newHTML1: 标记新增、修改删除后的 html1, newHTML2: 标记新增、修改删除后的 html2, Diffs: 差异部分(包含[Diffs：差异列表，DiffsCount：差异数量]) }

compareHTML(html1: string, html2: string)

两屏对比函数的方法，对有差异的部分进行去重和数量计算

参数: isDiffs: 有差异的部分 返回: [Diffs：差异列表，DiffsCount：差异数量

uniqText(isDiffs)

两屏对比函数的方法，用来计算删除、新增、编辑的数量

参数: arr: 有差异的部分, idx: 在解析 HTML 中的第几行, id: 标记的节点id(给有差异的部分添加 div 标签，标签的 id 部分) 返回: [ Diffs：差异列表，DiffsCount：差异数量 ]

computeTypes(arr: Array, idx: number, id: string)

计算两个文本的差异部分

参数: perv: string current: string 返回: [[0, '修改部分']] 0没有修改 1新增 -1删除

getDiffArr(prev: string, current: string)

问题

1 npm install 安装不上(vite 和 vitejs/plugin-vue 的版本不兼容) npm install --force 强制安装 2 同屏滚动卡顿 因为左边滚动给右边赋值的时候右边又给左边赋值导致卡顿。 3 打包时不对 ts 做检查 package.json 中 修改 "build": "vue-tsc --noEmit -skipLibCheck && vite build" 为 vite build 4 对比出有一半的标签 对 >123< 尖括号内的字符串匹配