JSFiddle - React, Tailwind, and code Playground

HTML

<textarea>Type or paste into the textarea, and as your text grows, LZ77 will begin compressing it below. 
 
As the text grows, you'll see that it becomes increasingly garbled as gzip finds repetitive portions and replaces them with "pointers". For instance, you can see that in the first sentence, the word "text" is replaced with a pointer to the "text" from "textarea".

As the text grows even more, the number of pointers increases as LZ77 finds matching patterns and compresses them.
    
LZ77 and LZ78 are the two lossless data compression algorithms published in papers by Abraham Lempel and Jacob Ziv in 1977 and 1978. They are also known as LZ1 and LZ2 respectively. These two algorithms form the basis for many variations including LZW, LZSS, LZMA and others. Besides their academic influence, these algorithms formed the basis of several ubiquitous compression schemes, including GIF and the DEFLATE algorithm used in PNG.
</textarea>
    
<p></p>

CSS

body {
  font-family: sans-serif;
}

textarea {
  font-family: sans-serif;
  font-size: 12px;
  height: 300px;
  width: 100%
}

p {
  font-size: 16px;
}

JavaScript

// https://www.npmjs.com/package/lz77
!function(){"use strict";var c=function(){var b={},c={refPrefix:"`",refIntBase:96,refIntFloorCode:" ".charCodeAt(0),refIntCeilCode:void 0,maxStringDistance:void 0,minStringLength:5,maxStringLength:void 0,defaultWindow:144,maxWindow:void 0,windowLength:void 0},d=function(a){a=a||{},c=f(c,a),c.refIntCeilCode=c.refIntFloorCode+c.refIntBase-1,c.maxStringDistance=Math.pow(c.refIntBase,2)-1,c.maxStringLength=Math.pow(c.refIntBase,1)-1+c.minStringLength,c.maxWindow=c.maxStringDistance+c.minStringLength},e=function(a,b,c){var d={};if(null!==a)if(Array.prototype.forEach&&a.forEach===Array.prototype.forEach)a.forEach(b,c);else if(a.length===+a.length){for(var e=0,f=a.length;f>e;e++)if(b.call(c,a[e],e,a)===d)return}else for(var g in a)if(a.hasOwnProperty(g)&&b.call(c,a[g],g,a)===d)return},f=function(a){return e(Array.prototype.slice.call(arguments,1),function(b){if(b)for(var c in b)a[c]=b[c]}),a},g=function(a,b){if(a>=0&&a<Math.pow(c.refIntBase,b)-1){for(var d="";a>0;)d=String.fromCharCode(a%c.refIntBase+c.refIntFloorCode)+d,a=Math.floor(a/c.refIntBase);for(var e=b-d.length,f=0;e>f;f++)d=String.fromCharCode(c.refIntFloorCode)+d;return d}throw"Reference int out of range: "+a+" (width = "+b+")"},h=function(a){return g(a-c.minStringLength,1)},i=function(a,b){for(var e,d=0,f=0;b>f;f++){if(d*=c.refIntBase,e=a.charCodeAt(f),!(e>=c.refIntFloorCode&&e<=c.refIntCeilCode))throw"Invalid char code in reference int: "+e;d+=e-c.refIntFloorCode}return d},j=function(a){return i(a,1)+c.minStringLength};return b.compress=function(a,b){d(b);var e=c.windowLength||c.defaultWindow;if(e>c.maxWindow)throw"Window length too large";for(var f="",i=0,j=a.length-c.minStringLength;j>i;){for(var...