JSFiddle - React, Tailwind, and code Playground

by not important

HTML

<textarea id="buffer"></textarea>
<p id="output"></p>

CoffeeScript

$bufferEl = $ '#buffer'

$outputEl = $ '#output'

timeoutId = undefined

class Compressor
    compress: (inputString) ->
        return unless inputString.length > 1
    
        pairs = inputString.match /[bcdfghjklmnpqrstvwxz][aeiouy]/g
    
        compressedString = inputString
    
        for pair in pairs
            pairParts = pair.split ''
    
            consonantIndex = 'bcdfghjklmnpqrstvwxz'.indexOf pairParts[0]
            vowelIndex = 'aeiouy'.indexOf pairParts[1]
    
            characterIndex = vowelIndex * 20 + consonantIndex
    
            compressedString = compressedString.split(pair).join characterIndex
    
        compressedString

compressor = new Compressor

$('body').on 'keyup', '#buffer', ->
    bufferVal = $(this).val()

    clearTimeout(timeoutId) unless timeoutId?

    timeoutId = setTimeout ->
        compressedVal = compressor.compress bufferVal
        $('#output').html compressedVal
    , 1000 / 4