Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

In the project, I met a requirement to compare the difference between two paragraphs of text. The deleted text should be marked with a deletion line and the newly added text should be marked in red. Originally wanted to implement their own, but the deadline is urgent, so go to Github, find this jSDIff is very powerful text comparison JS library to achieve, this article records the use of jSDIff process.

Installation and introduction

Run the NPM install diff –save command to install.

Import with import Diff from ‘Diff’.

How to use

Diff returns an array whose entry is an object with the following properties:

  • Value text field
  • Added totrue“Indicates that the field is new
  • Removed fortrue“Indicates that the field is deleted
  • Count Specifies the length of the text field
const Diff = require('diff'); const a = 'This is a very magical shoe. It costs 15 yuan.' const b = 'this is a strong and beautiful shoe. It only costs  12 yuan.' const result = Diff.diffChars(a, b); console.log(result)Copy the code

Jsdiff provides many methods to compare texts. Each method corresponds to a variety of comparison methods, and each method has different results after comparison. The following are listed one by one, and you can choose a suitable method according to your requirements.

  • DiffChars (oldStr, newStr[, options]) compares two blocks of text, character by character.

    • options
      • ignoreCase:trueIgnore case differences. The default isfalse.

  • DiffWords (oldStr, newStr[, options]) compares two blocks of text, word for word, ignoring Spaces.

    • options
      • ignoreCase:trueIgnore case differences. The default isfalse.

  • Diff. DiffWordsWithSpace (oldStr, newStr[, options]) compares two blocks of text, verbatim, and Spaces.

  • DiffLines (oldStr, newStr[, options]) compares two text blocks, line by line.

    • options
      • ignoreWhitespace:trueIgnore space at the beginning and end of the text.
      • newlineIsToken:trueTreat a newline character as a separate tag.

  • DiffTrimmedLines (oldStr, newStr[, options]) compares two text blocks, line by line, ignoring text header and trailing Spaces.

  • Diff. DiffSentences (oldStr, newStr[, options]) Compare two blocks of text, sentence by sentence.

Show text differences

AppendChild adds a string of DOM elements to the container node of the page through appendChild.

Adopting document. CreateDocumentFragment () to create a virtual node, the DOM traversal generated in the DOM elements are added to the virtual node, after traversal in one-time added to the page of the container DOM node, avoid the page has been redrawn.

Implementation code:

<template>
  <div id="display"></div>
</template>
<script>
const Diff = require('diff');
export default {
  data() {
    return {}
  },
  mounted() {
    const a = 'This is a   very magical shoe. It costs 15 yuan.'
    const b = 'This is a strong and beautiful shoe. It only costs 12 yuan.'
    const result = Diff.diffChars(a, b);
    const virtualDOM = document.createDocumentFragment();
    result.forEach((part) => {
      span = document.createElement('span');
      span.style.color = part.added ? 'red' : '#333333';;
      if (part.removed) {
        span.style['text-decoration'] = 'line-through';
      }
      span.appendChild(document.createTextNode(part.value));
      virtualDOM.appendChild(span);
    });
    document.getElementById('content').appendChild(virtualDOM);
  }
}
</script>
Copy the code

The following shows the effect of calling the various Diff methods.

  • diffChars

  • diffWords

  • diffWordsWithSpace

  • diffTrimmedLines

  • diffSentences

Choose the appropriate Diff method based on your requirements.