| 123456789101112131415161718192021222324252627282930 |
- <html>
- <body>
- <pre id="display"></pre>
- <script src="../../node_modules/diff/dist/diff.js"></script>
- <script>
- const one = 'beep boop',
- other = 'beep boob blah',
- color = '';
-
- let span = null;
- const diff = Diff.diffChars(one, other),
- display = document.getElementById('display'),
- fragment = document.createDocumentFragment();
- diff.forEach((part) => {
- // green for additions, red for deletions
- // grey for common parts
- const color = part.added ? 'green' : part.removed ? 'red' : 'grey';
- span = document.createElement('span');
- span.style.color = color;
- span.appendChild(document
- .createTextNode(part.value));
- fragment.appendChild(span);
- });
- display.appendChild(fragment);
- </script>
- </body>
- </html>
|
