[JS] 달라진 텍스트 표시 라이브러리

깃허브나 나무위키의 비교처럼
이전버전과 현재버전을 차이를 표시하는 라이브러리를 하나 가져왔다.
사실 php로 직접 만들어볼려고 발버둥치다가
60%까지 했는데 또또 똑같이 정리안하고 멘땅에 해딩하다 엎었다 ;(
추후에 한번 만들어봐야겠다. ( 이러고 또 안한다? )

소개할 라이브러리는 jsdifflib라는 친구다.

어느곳이나 그렇듯 깃허브에 설명이 되어있지만 ( 물론 영어로 )
다음에 편하게 사용하기 위해 사용법을 정리하려한다.

해당 깃허브에서 JavaScript와 css를 댕근 다운받아 import 해줘야한다.

 

// IF( viewType == 0 ) 
// 두창을 두고 양쪽 비교
// ELSE IF ( viewType == 1 )
// 창하나에 달라진 부분 표시
function diffUsingJS(viewType) {
	"use strict";
	var byId = function (id) { return document.getElementById(id); },
		base = difflib.stringAsLines(/*이전버전 텍스트*/),
		newtxt = difflib.stringAsLines(/*현재버전 텍스트*/),
		sm = new difflib.SequenceMatcher(base, newtxt),
		opcodes = sm.get_opcodes(),
		diffoutputdiv = byId(/*나타낼 박스 ID*/),
		contextSize = "";

	diffoutputdiv.innerHTML = "";
	contextSize = contextSize || null;

	diffoutputdiv.appendChild(diffview.buildView({
		baseTextLines: base,
		newTextLines: newtxt,
		opcodes: opcodes,
		baseTextName: /*이전 버전 제목*/,
		newTextName: /*현재버전 제목*/,
		contextSize: contextSize,
		viewType: viewType
	}));
}

주석으로 설명을 달아놨다.
viewType설명이 모호한데 0, 1을 넣어보면 할 수 있을 것이다 :)

 

결과