JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true" id="message">Type vowels here</div>

CSS

#message {
    border: 1px solid gray;
    min-height:50px;
    font-family: monospace;
    padding: 2px;
}

mark {
    outline: 1px solid #ffc080;
    background: #ffe0c0;
    display: inline-block;
}

JavaScript

$('[contenteditable]').live('focus', function() {
    var $this = $(this);
    $this.data('before', $this.html());
    return $this;
}).live('blur keyup paste', function() {
    var $this = $(this);
    if ($this.data('before') !== $this.html()) {
        $this.data('before', $this.html());
        $this.trigger('change');
    }
    return $this;
});

var magicRegex = /[aeiou]/gi;

$('#message').change(function() {
    $(this).find('br').replaceWith('\n');
    var message = $(this).text();
    
    message = message.replace(magicRegex , '<mark>$&</mark>');
    
    message = message.replace(/\n/gi, '<br />');
    $(this).html(message);
}).change();