https://github.com/icflorescu/textdiff-create
Create lean text diff deltas.
https://github.com/icflorescu/textdiff-create
diff javascript nodejs text-diff
Last synced: 6 months ago
JSON representation
Create lean text diff deltas.
- Host: GitHub
- URL: https://github.com/icflorescu/textdiff-create
- Owner: icflorescu
- License: isc
- Created: 2016-01-19T00:33:35.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2024-04-20T07:56:39.000Z (over 1 year ago)
- Last Synced: 2025-07-08T17:45:01.025Z (6 months ago)
- Topics: diff, javascript, nodejs, text-diff
- Language: JavaScript
- Size: 222 KB
- Stars: 39
- Watchers: 2
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# textdiff-create
[![NPM version][npm-image]][npm-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]
[![Sponsor the author][sponsor-image]][sponsor-url]
This is a simple module for creating **lean text diff deltas**, based on the excellent [fast-diff](https://github.com/jhchen/fast-diff) by [Jason Chen](https://github.com/jhchen).
Use in conjunction with [textdiff-patch](https://github.com/icflorescu/textdiff-patch).
## ❤️🇺🇦
See [below](#stand-with-ukraine).
## Usage
Assuming you've correctly installed the `npm` module with `npm i textdiff-create [--save|--save-dev]`:
const createPatch = require('textdiff-create');
const v1 = 'The sleepy brown fox';
const v2 = 'The quick brown fox jumps over the lazy dog';
const delta = createPatch(v1, v2);
console.log(JSON.stringify(delta));
The script will produce the following output:
[[0,4],[-1,6],[1,"quick"],[0,10],[1," jumps over the lazy dog"]]
Then you can use [textdiff-patch](https://github.com/icflorescu/textdiff-patch) to perform the reverse operation (build `v2` by applying `delta` to `v1`).
## Motivation
Modern web technologies permit editing large text blocks in client-side web applications. [CodeMirror](https://codemirror.net/) is perfectly usable with hundreds of lines of code and [ProseMirror](http://prosemirror.net/) will most likely enable users to easily edit entire ebooks in the browser, even on mobile devices. But mobile network cost is still an issue and sending the entire ebook content to the server on each save will always be impractical, even on HTTP 2.0.
There are many text diff tools in the Node.js ecosystem, but none of the ones I've seen is a straightforward solution able to produce a lean output free of redundant information, while also being optimized for client-side packaging with browserify or webpack.
Consider a scenario where users are editing large blocks of text content in a client-side application. Instead of sending the entire block of text to the server on each save, you'd ideally want to submit a "minimal patch" for each operation, containing just the relevant differences between the client-side version and the server-side version.
In the example above the user made 2 simple operations: replace the 2nd word and add 5 words in the end of the sentence.
Here's a quick comparison between `fast-diff` and `textdiff-create`:
textdiff-create: 64 chars
-------------------------
[[0,4],[-1,6],[1,"quick"],[0,10],[1," jumps over the lazy dog"]]
fast-diff: 86 chars
-------------------------
[[0,"The "],[-1,"sleepy"],[1,"quick"],[0," brown fox"],[1," jumps over the lazy dog"]]
Other text diff tools will produce an even more verbose output.
Verbosity is, of course, necessary for git-like transactions, but conciseness is preferable for simple text-editing scenarios (think blog posts, news stories, online book editing, etc.).
While the benefits are slim in the case of small strings, they are undoubtedly significant for recurring corrections on large bodies of text such as ebooks, especially over mobile data connections.
Correcting a misspelled word in a 100-kilobytes text will generate **around 100 kB of network traffic** if you're simply resending the entire content, **more than 100 kB** when using `fast-diff`, but **just a few bytes** with `textdiff-create`.
## FAQ
**Q**: Why splitting the functionality in two different packages?
**A**: To keep the deployed codebase and dependency graph to a minimum. Typical usage involves creating deltas in a client-side application and applying them server-side. This tool **is about optimization**, so its own code should conform to the same basic principle: avoid sending unnecessary bytes over the network.
## Warning
Don't forget to devise a proper version-tracking mechanism in your project and include the version number in the client-server conversation. Otherwise you risk running into serious inconsistency issues.
## Credits & support
If you find this piece of software useful, please star the repo, [spread the word](http://twitter.com/share?text=Create%20lean%20text%20diff%20patches%20in%20JavaScript&url=https%3A%2F%2Fgithub.com%2Ficflorescu%2Ftextdiff-create&hashtags=javascript%2Cnodejs%2Cnpm&via=icflorescu), [sponsor my work](https://github.com/sponsors/icflorescu) and feel free to endorse me on LinkedIn:
[](https://www.linkedin.com/in/icflorescu)
## Stand with Ukraine
On 24th of February 2022 [Russia unlawfully invaded Ukraine](https://en.wikipedia.org/wiki/Russo-Ukrainian_War). This is an unjustified, unprovoked attack on the sovereignty of a neighboring country, but also an open affront to international peace and stability that has the potential to degenerate into a nuclear event threatening the very existence of humanity. I am a Romanian (EU) citizen, but I stand with Ukraine and I am doing everything in my power to stop this madness. Here's [how you can show your support](https://www.stopputin.net/).
## LICENSE
Released under [ISC](https://github.com/icflorescu/textdiff-create/blob/master/LICENSE).
[npm-image]: https://img.shields.io/npm/v/textdiff-create.svg?style=flat-square
[npm-url]: https://npmjs.org/package/textdiff-create
[license-image]: http://img.shields.io/npm/l/textdiff-create.svg?style=flat-square
[license-url]: LICENSE
[downloads-image]: http://img.shields.io/npm/dm/textdiff-create.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/textdiff-create
[sponsor-image]: https://img.shields.io/badge/sponsor-violet?style=flat-square
[sponsor-url]: https://github.com/sponsors/icflorescu