vue实现文字对比

Vue 实现文字对比的方法

使用字符串比较方法

在 Vue 中可以通过字符串比较方法实现文字对比，例如使用 === 或 localeCompare 进行精确或模糊对比。以下是一个简单的示例：

<template>
  <div>
    <p>对比结果: {{ compareResult }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text1: 'Hello',
      text2: 'hello',
    };
  },
  computed: {
    compareResult() {
      return this.text1 === this.text2 ? '相同' : '不同';
    },
  },
};
</script>

使用第三方库（如 diff-match-patch）

如果需要更高级的对比功能（如高亮显示差异部分），可以使用第三方库 diff-match-patch。以下是一个实现示例：

<template>
  <div>
    <div v-html="diffResult"></div>
  </div>
</template>

<script>
import { diff_match_patch } from 'diff-match-patch';
export default {
  data() {
    return {
      text1: 'Hello World',
      text2: 'Hello Vue',
    };
  },
  computed: {
    diffResult() {
      const dmp = new diff_match_patch();
      const diffs = dmp.diff_main(this.text1, this.text2);
      dmp.diff_cleanupSemantic(diffs);
      return this.formatDiff(diffs);
    },
  },
  methods: {
    formatDiff(diffs) {
      let html = '';
      diffs.forEach(([type, text]) => {
        if (type === 0) html += text;
        else if (type === -1) html += `<del style="color:red">${text}</del>`;
        else html += `<ins style="color:green">${text}</ins>`;
      });
      return html;
    },
  },
};
</script>

使用 Vue 组件库（如 vue-diff）

如果希望快速实现文字对比功能，可以直接使用现成的 Vue 组件库，例如 vue-diff：

<template>
  <div>
    <vue-diff :oldValue="text1" :newValue="text2" />
  </div>
</template>

<script>
import VueDiff from 'vue-diff';
export default {
  components: { VueDiff },
  data() {
    return {
      text1: 'Hello World',
      text2: 'Hello Vue',
    };
  },
};
</script>

实现逐行对比

对于多行文本的对比，可以通过分割字符串为数组后逐行对比：

<template>
  <div>
    <div v-for="(line, index) in lineDiffs" :key="index">
      <span v-if="line.type === 'same'">{{ line.text }}</span>
      <span v-else-if="line.type === 'removed'" style="color: red">{{ line.text }}</span>
      <span v-else style="color: green">{{ line.text }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text1: 'Line 1\nLine 2\nLine 3',
      text2: 'Line 1\nLine 4\nLine 3',
    };
  },
  computed: {
    lineDiffs() {
      const lines1 = this.text1.split('\n');
      const lines2 = this.text2.split('\n');
      const maxLines = Math.max(lines1.length, lines2.length);
      const diffs = [];
      for (let i = 0; i < maxLines; i++) {
        if (lines1[i] === lines2[i]) {
          diffs.push({ type: 'same', text: lines1[i] });
        } else {
          if (lines1[i]) diffs.push({ type: 'removed', text: lines1[i] });
          if (lines2[i]) diffs.push({ type: 'added', text: lines2[i] });
        }
      }
      return diffs;
    },
  },
};
</script>