当前位置：首页 > VUE

vue实现文本对比

2026-02-18 15:21:18VUE

文本对比的实现方法

在Vue中实现文本对比功能，可以通过比较两个文本字符串的差异并高亮显示不同部分。以下是几种常见的实现方式：

使用diff库进行文本对比

安装diff库：

npm install diff

在Vue组件中使用：

vue实现文本对比

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

<script>
import * as Diff from 'diff';

export default {
  data() {
    return {
      text1: '旧文本内容',
      text2: '新文本内容',
      diffResult: ''
    };
  },
  mounted() {
    this.compareText();
  },
  methods: {
    compareText() {
      const diff = Diff.diffChars(this.text1, this.text2);
      this.diffResult = diff.map(part => {
        const color = part.added ? 'green' : 
                     part.removed ? 'red' : 'grey';
        return `<span style="color:${color}">${part.value}</span>`;
      }).join('');
    }
  }
};
</script>

使用vue-diff组件

安装vue-diff组件：

npm install vue-diff

在项目中使用：

vue实现文本对比

<template>
  <div>
    <vue-diff :old-string="text1" :new-string="text2" />
  </div>
</template>

<script>
import VueDiff from 'vue-diff';

export default {
  components: { VueDiff },
  data() {
    return {
      text1: '旧文本内容',
      text2: '新文本内容'
    };
  }
};
</script>

自定义实现文本对比

对于简单的文本对比需求，可以自定义实现：

<template>
  <div>
    <div class="text-compare">
      <div class="original">{{ highlightedText1 }}</div>
      <div class="modified">{{ highlightedText2 }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text1: '旧文本内容',
      text2: '新文本内容',
      highlightedText1: '',
      highlightedText2: ''
    };
  },
  mounted() {
    this.highlightDifferences();
  },
  methods: {
    highlightDifferences() {
      let result1 = '';
      let result2 = '';
      const maxLength = Math.max(this.text1.length, this.text2.length);

      for (let i = 0; i < maxLength; i++) {
        const char1 = this.text1[i] || '';
        const char2 = this.text2[i] || '';

        if (char1 !== char2) {
          result1 += `<span class="diff">${char1}</span>`;
          result2 += `<span class="diff">${char2}</span>`;
        } else {
          result1 += char1;
          result2 += char2;
        }
      }

      this.highlightedText1 = result1;
      this.highlightedText2 = result2;
    }
  }
};
</script>

<style>
.diff {
  background-color: #ffcccc;
  color: #ff0000;
}
.text-compare {
  display: flex;
  justify-content: space-between;
}
</style>

使用CodeMirror进行代码对比

对于代码对比，可以使用CodeMirror的merge插件：

npm install codemirror

实现代码：

<template>
  <div ref="editor" class="code-compare"></div>
</template>

<script>
import CodeMirror from 'codemirror';
import 'codemirror/addon/merge/merge';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/merge/merge.css';

export default {
  props: {
    oldCode: String,
    newCode: String
  },
  mounted() {
    this.initEditor();
  },
  methods: {
    initEditor() {
      CodeMirror.MergeView(this.$refs.editor, {
        value: this.newCode,
        origLeft: this.oldCode,
        lineNumbers: true,
        mode: 'javascript',
        highlightDifferences: true,
        collapseIdentical: false
      });
    }
  }
};
</script>

<style>
.code-compare {
  height: 400px;
  border: 1px solid #ddd;
}
</style>