Javscript 소스 비교 라이브러리

jsdifflib-master.zip

0.01MB

 

샘플

<table>
	<thead>
		<tr>
			<th align="right">Left</th>
			<th>Right</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td align="right"><textarea rows="10" cols="40" style="width: auto;" name="tb_input" id="tb_input"></textarea></td>
			<td><textarea rows="10" cols="40" style="width: auto;" name="tb_output" id="tb_output"></textarea></td>
		</tr>
	</tbody>
</table>
<p><input onclick="ftn_compare(0);" type="button" value="Compare" class="custombutton"></p>
<div id="output"></div>

<script src="/scripts/diffview/diffview.js"></script>
<script src="/scripts/diffview/difflib.js"></script>
<link href="/scripts/diffview/diffview.css" rel="stylesheet"/>
<script>

	function ftn_compare(viewType) {

		diffoutputdiv = document.getElementById("output");
		diffoutputdiv.innerHTML = "";
		var str_input = document.getElementById("tb_input").value;
		var str_output = document.getElementById("tb_output").value;


		"use strict";
		var byId = function (id) { return document.getElementById(id); },
			base = difflib.stringAsLines(byId("tb_input").value),
			newtxt = difflib.stringAsLines(byId("tb_output").value),
			sm = new difflib.SequenceMatcher(base, newtxt),
			opcodes = sm.get_opcodes(),
			diffoutputdiv = byId("output"),
			contextSize = '';

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

		diffoutputdiv.appendChild(diffview.buildView({
			baseTextLines: base,
			newTextLines: newtxt,
			opcodes: opcodes,
			baseTextName: "Left Text",
			newTextName: "Right Text",
			contextSize: '',
			viewType: viewType
		}));
	}

</script>

 

참조1 : https://github.com/cemerick/jsdifflib

GitHub - cemerick/jsdifflib: A javascript library for diffing text and generating corresponding HTML views

 

참조2 : https://www.daftlogic.com/sandbox-javascript-compare-differences-between-strings.htm

JavaScript to Compare Differences Between Strings