go-diff

Usage

import { diffChars } from 'go-diff';

function changed(diffs: DiffDataType[]) {
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < diffs.length; i++) {
    const { Type, Text } = diffs[i];
    let node: Node;
    if (Type === -1) {
      node = document.createElement('del');
      node.appendChild(document.createTextNode(Text));
    } else if (Type === 1) {
      node = document.createElement('ins');
      node.appendChild(document.createTextNode(Text));
    } else {
      node = document.createTextNode(Text);
    }
    fragment.appendChild(node);
  }

  return fragment;
}

async function onDiff() {
 const diffs = await diffChars('abc', 'adc');
 const domFragment = changed(diffs);
 document.body.appendChild(domFragment);
}

API

• diffChars(oldStr: string, newStr: string): Promise<[]{Type: 0 | -1 | 1; Text: string}>

Type 0: 不变，-1: 删除，1: 新增

Text 字符串

• diffLine(oldStr: string, newStr: string): Promise<[]{Type: 0 | -1 | 1; Text: string}>

Type 0: 不变，-1: 删除，1: 新增

Text 字符串

• diffSide(oldStr: string, newStr: string): Promise<{Left: []{Type: 0 | -1 | 1; Text: string}, Right: []{Type: 0 | -1 | 1; Text: string}}>

Type 0: 不变，-1: 删除，1: 新增

Text 字符串