js实现字符串差异对比

关键：使用 diff-match-patch 插件

举例：原始地址与匹配地址差异对比

代码实现：

<script setup>
import { ref, onMounted, reactive } from "vue";
import DiffMatchPatch from "diff-match-patch";

onMounted(() => {
  toMatch(list);
});

const list = reactive([
  {
    originalAddress:
      "乐从镇兴乐社区建设路A89号荣生大厦一楼185号铺之二（住所申报）",
    matchAddress: "乐从镇兴乐社区建设路A89号荣生大厦一楼185号铺之二",
    MatchRatio: "xx",
  },
  {
    originalAddress: "乐从镇水藤新旧路口三区1号B座三楼（住所申报）",
    matchAddress: "乐从镇水藤新旧路口三区1号欧德利商场前七仓",
    MatchRatio: "xx",
  },
  {
    originalAddress: "乐从镇跃进路新苑商场12号（住所申报）",
    matchAddress: "乐从镇乐从社区跃进路12号新世纪商铺",
    MatchRatio: "xx",
  },
  {
    originalAddress: "乐从镇乐从居委会跃进路7号宏基楼首层夹层之2号（住所申报）",
    matchAddress: "乐从镇乐从居委会跃进路7号宏基楼首层夹层之2号",
    MatchRatio: "xx",
  },
  {
    originalAddress: "乐从镇平步工业区北五路四号之6（住所申报）",
    matchAddress: "乐从镇平步社区工业区北五路4号",
    MatchRatio: "xx",
  },
  {
    originalAddress: "乐从镇良教南便街五巷13号（住所申报）",
    matchAddress: "乐从镇良教村南便街五巷13号",
    MatchRatio: "xx",
  },
]);

function toMatch(dataArr) {
  dataArr.forEach((item) => {
    let { originalAddress, matchAddress } = item;
    const dmp = new DiffMatchPatch();
    const diff = dmp.diff_main(originalAddress, matchAddress);
    let originalStr = "";
    let matchStr = "";

    diff.forEach((item) => {
      // -1：原始地址
      if (item[0] === -1) {
        originalStr += `<span style = 'background:#f6c5c5'>${item[1]}</span>`;
      }

      // 1：匹配地址
      else if (item[0] === 1) {
        matchStr += `<span style = 'background:#b5ecb5'>${item[1]}</span>`;
      } else {
        //1：共有
        originalStr += `<span>${item[1]}</span>`;
        matchStr += `<span>${item[1]}</span>`;
      }
    });
    item.originalAddress = originalStr;
    item.matchAddress = matchStr;
  });
}
</script>

<template>
  <div class="match">
    <table border="1" style="width: 60%; font-size: 16px">
      <tr>
        <th style="width: 45%">原始地址</th>
        <th style="width: 45%">匹配地址</th>
        <th>匹配率</th>
      </tr>
      <tr v-for="(item, index) in list" :key="index">
        <td v-html="item.originalAddress"></td>
        <td v-html="item.matchAddress"></td>
        <td>{{ item.MatchRatio }}</td>
      </tr>
    </table>
  </div>
</template>

运行结果：