<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>README</title>
<style>
html {
line-height: 1.5;
font-family: Georgia, serif;
font-size: 20px;
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
margin: 0 auto;
max-width: 36em;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 1em;
}
h1 {
font-size: 1.8em;
}
}
@media print {
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
font-size: 85%;
margin: 0;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1.3em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { color: #008000; } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { color: #008000; font-weight: bold; } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
</head>
<body>
<h1 id="jsdiff">jsdiff</h1>
<p>A javascript text differencing implementation.</p>
<p>Based on the algorithm proposed in <a
href="http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.4.6927">"An
O(ND) Difference Algorithm and its Variations" (Myers, 1986)</a>.</p>
<h2 id="installation">Installation</h2>
<div class="sourceCode" id="cb1"><pre
class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ex">npm</span> install diff <span class="at">--save</span></span></code></pre></div>
<h2 id="api">API</h2>
<ul>
<li><p><code>Diff.diffChars(oldStr, newStr[, options])</code> - diffs
two blocks of text, comparing character by character.</p>
<p>Returns a list of change objects (See below).</p>
<p>Options</p>
<ul>
<li><code>ignoreCase</code>: <code>true</code> to ignore casing
difference. Defaults to <code>false</code>.</li>
</ul></li>
<li><p><code>Diff.diffWords(oldStr, newStr[, options])</code> - diffs
two blocks of text, comparing word by word, ignoring whitespace.</p>
<p>Returns a list of change objects (See below).</p>
<p>Options</p>
<ul>
<li><code>ignoreCase</code>: Same as in <code>diffChars</code>.</li>
</ul></li>
<li><p><code>Diff.diffWordsWithSpace(oldStr, newStr[, options])</code> -
diffs two blocks of text, comparing word by word, treating whitespace as
significant.</p>
<p>Returns a list of change objects (See below).</p></li>
<li><p><code>Diff.diffLines(oldStr, newStr[, options])</code> - diffs
two blocks of text, comparing line by line.</p>
<p>Options</p>
<ul>
<li><code>ignoreWhitespace</code>: <code>true</code> to ignore leading
and trailing whitespace. This is the same as
<code>diffTrimmedLines</code></li>
<li><code>newlineIsToken</code>: <code>true</code> to treat newline
characters as separate tokens. This allows for changes to the newline
structure to occur independently of the line content and to be treated
as such. In general this is the more human friendly form of
<code>diffLines</code> and <code>diffLines</code> is better suited for
patches and other computer friendly output.</li>
</ul>
<p>Returns a list of change objects (See below).</p></li>
<li><p><code>Diff.diffTrimmedLines(oldStr, newStr[, options])</code> -
diffs two blocks of text, comparing line by line, ignoring leading and
trailing whitespace.</p>
<p>Returns a list of change objects (See below).</p></li>
<li><p><code>Diff.diffSentences(oldStr, newStr[, options])</code> -
diffs two blocks of text, comparing sentence by sentence.</p>
<p>Returns a list of change objects (See below).</p></li>
<li><p><code>Diff.diffCss(oldStr, newStr[, options])</code> - diffs two
blocks of text, comparing CSS tokens.</p>
<p>Returns a list of change objects (See below).</p></li>
<li><p><code>Diff.diffJson(oldObj, newObj[, options])</code> - diffs two
JSON objects, comparing the fields defined on each. The order of fields,
etc does not matter in this comparison.</p>
<p>Returns a list of change objects (See below).</p></li>
<li><p><code>Diff.diffArrays(oldArr, newArr[, options])</code> - diffs
two arrays, comparing each item for strict equality (===).</p>
<p>Options</p>
<ul>
<li><code>comparator</code>: <code>function(left, right)</code> for
custom equality checks</li>
</ul>
<p>Returns a list of change objects (See below).</p></li>
<li><p><code>Diff.createTwoFilesPatch(oldFileName, newFileName, oldStr, newStr, oldHeader, newHeader)</code>
- creates a unified diff patch.</p>
<p>Parameters:</p>
<ul>
<li><code>oldFileName</code> : String to be output in the filename
section of the patch for the removals</li>
<li><code>newFileName</code> : String to be output in the filename
section of the patch for the additions</li>
<li><code>oldStr</code> : Original string value</li>
<li><code>newStr</code> : New string value</li>
<li><code>oldHeader</code> : Additional information to include in the
old file header</li>
<li><code>newHeader</code> : Additional information to include in the
new file header</li>
<li><code>options</code> : An object with options. Currently, only
<code>context</code> is supported and describes how many lines of
context should be included.</li>
</ul></li>
<li><p><code>Diff.createPatch(fileName, oldStr, newStr, oldHeader, newHeader)</code>
- creates a unified diff patch.</p>
<p>Just like Diff.createTwoFilesPatch, but with oldFileName being equal
to newFileName.</p></li>
<li><p><code>Diff.structuredPatch(oldFileName, newFileName, oldStr, newStr, oldHeader, newHeader, options)</code>
- returns an object with an array of hunk objects.</p>
<p>This method is similar to createTwoFilesPatch, but returns a data
structure suitable for further processing. Parameters are the same as
createTwoFilesPatch. The data structure returned may look like this:</p>
<div class="sourceCode" id="cb2"><pre
class="sourceCode js"><code class="sourceCode javascript"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a>{</span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a> <span class="dt">oldFileName</span><span class="op">:</span> <span class="st">'oldfile'</span><span class="op">,</span> <span class="dt">newFileName</span><span class="op">:</span> <span class="st">'newfile'</span><span class="op">,</span></span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a> <span class="dt">oldHeader</span><span class="op">:</span> <span class="st">'header1'</span><span class="op">,</span> <span class="dt">newHeader</span><span class="op">:</span> <span class="st">'header2'</span><span class="op">,</span></span>
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a> <span class="dt">hunks</span><span class="op">:</span> [{</span>
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a> <span class="dt">oldStart</span><span class="op">:</span> <span class="dv">1</span><span class="op">,</span> <span class="dt">oldLines</span><span class="op">:</span> <span class="dv">3</span><span class="op">,</span> <span class="dt">newStart</span><span class="op">:</span> <span class="dv">1</span><span class="op">,</span> <span class="dt">newLines</span><span class="op">:</span> <span class="dv">3</span><span class="op">,</span></span>
<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a> <span class="dt">lines</span><span class="op">:</span> [<span class="st">' line2'</span><span class="op">,</span> <span class="st">' line3'</span><span class="op">,</span> <span class="st">'-line4'</span><span class="op">,</span> <span class="st">'+line5'</span><span class="op">,</span> <span class="st">'</span><span class="sc">\\</span><span class="st"> No newline at end of file'</span>]<span class="op">,</span></span>
<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a> }]</span>
<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div></li>
<li><p><code>Diff.applyPatch(source, patch[, options])</code> - applies
a unified diff patch.</p>
<p>Return a string containing new version of provided data.
<code>patch</code> may be a string diff or the output from the
<code>parsePatch</code> or <code>structuredPatch</code> methods.</p>
<p>The optional <code>options</code> object may have the following
keys:</p>
<ul>
<li><code>fuzzFactor</code>: Number of lines that are allowed to differ
before rejecting a patch. Defaults to 0.</li>
<li><code>compareLine(lineNumber, line, operation, patchContent)</code>:
Callback used to compare to given lines to determine if they should be
considered equal when patching. Defaults to strict equality but may be
overridden to provide fuzzier comparison. Should return false if the
lines should be rejected.</li>
</ul></li>
<li><p><code>Diff.applyPatches(patch, options)</code> - applies one or
more patches.</p>
<p>This method will iterate over the contents of the patch and apply to
data provided through callbacks. The general flow for each patch index
is:</p>
<ul>
<li><code>options.loadFile(index, callback)</code> is called. The caller
should then load the contents of the file and then pass that to the
<code>callback(err, data)</code> callback. Passing an <code>err</code>
will terminate further patch execution.</li>
<li><code>options.patched(index, content, callback)</code> is called
once the patch has been applied. <code>content</code> will be the return
value from <code>applyPatch</code>. When it's ready, the caller should
call <code>callback(err)</code> callback. Passing an <code>err</code>
will terminate further patch execution.</li>
</ul>
<p>Once all patches have been applied or an error occurs, the
<code>options.complete(err)</code> callback is made.</p></li>
<li><p><code>Diff.parsePatch(diffStr)</code> - Parses a patch into
structured data</p>
<p>Return a JSON object representation of the a patch, suitable for use
with the <code>applyPatch</code> method. This parses to the same
structure returned by <code>Diff.structuredPatch</code>.</p></li>
<li><p><code>convertChangesToXML(changes)</code> - converts a list of
changes to a serialized XML format</p></li>
</ul>
<p>All methods above which accept the optional <code>callback</code>
method will run in sync mode when that parameter is omitted and in async
mode when supplied. This allows for larger diffs without blocking the
event loop. This may be passed either directly as the final parameter or
as the <code>callback</code> field in the <code>options</code>
object.</p>
<h3 id="change-objects">Change Objects</h3>
<p>Many of the methods above return change objects. These objects
consist of the following fields:</p>
<ul>
<li><code>value</code>: Text content</li>
<li><code>added</code>: True if the value was inserted into the new
string</li>
<li><code>removed</code>: True if the value was removed from the old
string</li>
</ul>
<p>Note that some cases may omit a particular flag field. Comparison on
the flag fields should always be done in a truthy or falsy manner.</p>
<h2 id="examples">Examples</h2>
<p>Basic example in Node</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="pp">require</span>(<span class="st">'colors'</span>)<span class="op">;</span></span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> Diff <span class="op">=</span> <span class="pp">require</span>(<span class="st">'diff'</span>)<span class="op">;</span></span>
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> one <span class="op">=</span> <span class="st">'beep boop'</span><span class="op">;</span></span>
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> other <span class="op">=</span> <span class="st">'beep boob blah'</span><span class="op">;</span></span>
<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> diff <span class="op">=</span> Diff<span class="op">.</span><span class="fu">diffChars</span>(one<span class="op">,</span> other)<span class="op">;</span></span>
<span id="cb3-8"><a href="#cb3-8" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-9"><a href="#cb3-9" aria-hidden="true" tabindex="-1"></a>diff<span class="op">.</span><span class="fu">forEach</span>((part) <span class="kw">=></span> {</span>
<span id="cb3-10"><a href="#cb3-10" aria-hidden="true" tabindex="-1"></a> <span class="co">// green for additions, red for deletions</span></span>
<span id="cb3-11"><a href="#cb3-11" aria-hidden="true" tabindex="-1"></a> <span class="co">// grey for common parts</span></span>
<span id="cb3-12"><a href="#cb3-12" aria-hidden="true" tabindex="-1"></a> <span class="kw">const</span> color <span class="op">=</span> part<span class="op">.</span><span class="at">added</span> <span class="op">?</span> <span class="st">'green'</span> <span class="op">:</span></span>
<span id="cb3-13"><a href="#cb3-13" aria-hidden="true" tabindex="-1"></a> part<span class="op">.</span><span class="at">removed</span> <span class="op">?</span> <span class="st">'red'</span> <span class="op">:</span> <span class="st">'grey'</span><span class="op">;</span></span>
<span id="cb3-14"><a href="#cb3-14" aria-hidden="true" tabindex="-1"></a> <span class="bu">process</span><span class="op">.</span><span class="at">stderr</span><span class="op">.</span><span class="fu">write</span>(part<span class="op">.</span><span class="at">value</span>[color])<span class="op">;</span></span>
<span id="cb3-15"><a href="#cb3-15" aria-hidden="true" tabindex="-1"></a>})<span class="op">;</span></span>
<span id="cb3-16"><a href="#cb3-16" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb3-17"><a href="#cb3-17" aria-hidden="true" tabindex="-1"></a><span class="bu">console</span><span class="op">.</span><span class="fu">log</span>()<span class="op">;</span></span></code></pre></div>
<p>Running the above program should yield</p>
<img src="images/node_example.png" alt="Node Example">
<p>Basic example in a web page</p>
<div class="sourceCode" id="cb4"><pre
class="sourceCode html"><code class="sourceCode html"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a><span class="kw"><pre</span> <span class="er">id</span><span class="ot">=</span><span class="st">"display"</span><span class="kw">></pre></span></span>
<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a><span class="kw"><script</span> <span class="er">src</span><span class="ot">=</span><span class="st">"diff.js"</span><span class="kw">></script></span></span>
<span id="cb4-3"><a href="#cb4-3" aria-hidden="true" tabindex="-1"></a><span class="kw"><script></span></span>
<span id="cb4-4"><a href="#cb4-4" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> one <span class="op">=</span> <span class="st">'beep boop'</span><span class="op">,</span></span>
<span id="cb4-5"><a href="#cb4-5" aria-hidden="true" tabindex="-1"></a> other <span class="op">=</span> <span class="st">'beep boob blah'</span><span class="op">,</span></span>
<span id="cb4-6"><a href="#cb4-6" aria-hidden="true" tabindex="-1"></a> color <span class="op">=</span> <span class="st">''</span><span class="op">;</span></span>
<span id="cb4-7"><a href="#cb4-7" aria-hidden="true" tabindex="-1"></a> </span>
<span id="cb4-8"><a href="#cb4-8" aria-hidden="true" tabindex="-1"></a><span class="kw">let</span> span <span class="op">=</span> <span class="kw">null</span><span class="op">;</span></span>
<span id="cb4-9"><a href="#cb4-9" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb4-10"><a href="#cb4-10" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> diff <span class="op">=</span> Diff<span class="op">.</span><span class="fu">diffChars</span>(one<span class="op">,</span> other)<span class="op">,</span></span>
<span id="cb4-11"><a href="#cb4-11" aria-hidden="true" tabindex="-1"></a> display <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">getElementById</span>(<span class="st">'display'</span>)<span class="op">,</span></span>
<span id="cb4-12"><a href="#cb4-12" aria-hidden="true" tabindex="-1"></a> fragment <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">createDocumentFragment</span>()<span class="op">;</span></span>
<span id="cb4-13"><a href="#cb4-13" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb4-14"><a href="#cb4-14" aria-hidden="true" tabindex="-1"></a>diff<span class="op">.</span><span class="fu">forEach</span>((part) <span class="kw">=></span> {</span>
<span id="cb4-15"><a href="#cb4-15" aria-hidden="true" tabindex="-1"></a> <span class="co">// green for additions, red for deletions</span></span>
<span id="cb4-16"><a href="#cb4-16" aria-hidden="true" tabindex="-1"></a> <span class="co">// grey for common parts</span></span>
<span id="cb4-17"><a href="#cb4-17" aria-hidden="true" tabindex="-1"></a> <span class="kw">const</span> color <span class="op">=</span> part<span class="op">.</span><span class="at">added</span> <span class="op">?</span> <span class="st">'green'</span> <span class="op">:</span></span>
<span id="cb4-18"><a href="#cb4-18" aria-hidden="true" tabindex="-1"></a> part<span class="op">.</span><span class="at">removed</span> <span class="op">?</span> <span class="st">'red'</span> <span class="op">:</span> <span class="st">'grey'</span><span class="op">;</span></span>
<span id="cb4-19"><a href="#cb4-19" aria-hidden="true" tabindex="-1"></a> span <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">createElement</span>(<span class="st">'span'</span>)<span class="op">;</span></span>
<span id="cb4-20"><a href="#cb4-20" aria-hidden="true" tabindex="-1"></a> span<span class="op">.</span><span class="at">style</span><span class="op">.</span><span class="at">color</span> <span class="op">=</span> color<span class="op">;</span></span>
<span id="cb4-21"><a href="#cb4-21" aria-hidden="true" tabindex="-1"></a> span<span class="op">.</span><span class="fu">appendChild</span>(<span class="bu">document</span></span>
<span id="cb4-22"><a href="#cb4-22" aria-hidden="true" tabindex="-1"></a> <span class="op">.</span><span class="fu">createTextNode</span>(part<span class="op">.</span><span class="at">value</span>))<span class="op">;</span></span>
<span id="cb4-23"><a href="#cb4-23" aria-hidden="true" tabindex="-1"></a> fragment<span class="op">.</span><span class="fu">appendChild</span>(span)<span class="op">;</span></span>
<span id="cb4-24"><a href="#cb4-24" aria-hidden="true" tabindex="-1"></a>})<span class="op">;</span></span>
<span id="cb4-25"><a href="#cb4-25" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb4-26"><a href="#cb4-26" aria-hidden="true" tabindex="-1"></a>display<span class="op">.</span><span class="fu">appendChild</span>(fragment)<span class="op">;</span></span>
<span id="cb4-27"><a href="#cb4-27" aria-hidden="true" tabindex="-1"></a><span class="kw"></script></span></span></code></pre></div>
<p>Open the above .html file in a browser and you should see</p>
<img src="images/web_example.png" alt="Node Example">
<p><strong><a href="http://kpdecker.github.com/jsdiff">Full online
demo</a></strong></p>
<h2 id="compatibility">Compatibility</h2>
<p>jsdiff supports all ES3 environments with some known issues on IE8
and below. Under these browsers some diff algorithms such as word diff
and others may fail due to lack of support for capturing groups in the
<code>split</code> operation.</p>
<h2 id="license">License</h2>
<p>See <a
href="https://github.com/kpdecker/jsdiff/blob/master/LICENSE">LICENSE</a>.</p>
</body>
</html>
|