微信小程序对比文本差异

项目中有使用到比对两段文本的差异，不一样的位置高亮显示，网上翻阅了一下发现似乎没有这方面的内容，随即有了本文。

使用插件 diff.js

微信开发者工具打开底部 终端 npm install diff --save 下载依赖包

顶部工具中使用 构建npm

使用方式比较简单，在需求页面头部引入

var diff = require('diff');

在需求位置使用：

let content1 = '百年童佳倍（2021版）终=身重大疾病保险',content2='百年童佳倍（2021版）终身重大疾病保险123'
let diffResult = diff.diffChars(content1,content2)

console.log(diffResult)

结果：

对应举例的content1与content2

文本相同部分不对有 removed 与 added 属性

属于content1专有内容removed为true，content2的内容added为true

区别出两段文本的差异后就好处理了

代码仅给出思路，逻辑简单自行优化即可

方法1

（两段文本合并展示，不同部分以不同颜色进行高亮展示）：

直接在处理结果的基础上增加颜色属性，在wxml中以text标签的形式循环遍历内容，style中动态判断是否含有color属性，动态赋值：

js

let content1 = '百年童佳倍（2021版）终=身重大疾病保险',content2='百年童佳倍（2021版）终身重大疾病保险123'
          let diffResult = diff.diffChars(content1,content2)
          if(diffResult.length){
            diffResult.map(item=>{
                if(!!item.added){
                    item.color = 'red'
                }
                if(!!item.removed){
                    item.color = 'blue'
                }
            })
          }
          this.setData({
            diffResult:diffResult
          })

wxml:

<text wx:for="{{diffResult}}" wx:key='index' style="color:{{!!item.color?item.color:'#999'}}">{{item.value}}</text>

方法2：

两段文本各自展示差异部分，不同颜色高亮展示内容

区分不同的内容，处理为两个不同的数组，共同拥有相同部分，各自拥有各自的不同部分：

js

let content1 = '百年童佳倍（2021版）终=身重大疾病保险',content2='百年童佳倍（2021版）终身重大疾病保险123'
          let diffResult = diff.diffChars(content1,content2),disposed1=[],disposed2=[]
          if(diffResult.length){
            diffResult.map(item=>{
                if(!!item.added){
                    disposed1.push(item)
                }else if(!!item.removed){
                    disposed2.push(item)
                }else{
                    disposed1.push(item)
                    disposed2.push(item)
                }
            })
          }
          this.setData({
            diffResult:[disposed1,disposed2]
          })
          console.log(this.data.diffResult)

wxml:

<view wx:for="{{2}}" wx:key='index'>
    <text wx:for="{{diffResult[index]}}" wx:key='indexs' wx:for-index="indexs" style="color:{{index==0?(!!item.added?'red':''):(!!item.removed?'blue':'')}}">{{item.value}}</text>
</view>

若有难以理解内容，欢迎指出。