微信小程序对比文本差异

10 篇文章 0 订阅

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

使用插件 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

文本相同部分不对有 removedadded 属性

属于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>

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

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值