TypeScript + diff-match-patch で差分検知

diff-match-patch を TypeScript で使った簡単なサンプルです。

diff-match-patch はテキスト同士の比較をできる便利なライブラリです。

差分をhtmlに出力できます。

npm install typescript ts-node diff-match-patch
npm install -D @types/diff-match-patch

npx tsc --init

mkdir src
touch src/main.ts
import { diff_match_patch as DiffMatchPatch } from 'diff-match-patch'

const textA = 'hoge\n foo\n bar\n'
const textB = 'hoge\n foo\n baz\n'

const compare = (textA: string, textB: string): void => {
  const dmp = new DiffMatchPatch()
  const diff = dmp.diff_main(textA, textB)

  if (dmp.diff_levenshtein(diff) === 0) {
    console.log('一致')
  } else {
    console.log('差分あり')
    const html = dmp.diff_prettyHtml(diff)
    console.log(html)
  }
}

compare(textA, textB)

$ npx ts-node src/main.ts

差分あり
<span>hoge¶<br> foo¶<br> ba</span><del style="background:#ffe6e6;">r</del><ins style="background:#e6ffe6;">z</ins><span>¶<br></span>
出力されたHTML

TypeScript

Posted by たみぼうず