JSFiddle - React, Tailwind, and code Playground

by minitech

HTML

<span id="typebehind-result"></span><input type="text" id="typebehind-source" value="" placeholder="Type behind me!" />

CSS

#typebehind-source {
    background-color: transparent;
    color: transparent;
    position: relative;
}

#typebehind-source:-moz-placeholder {
    color: #666;
}

#typebehind-result {
    position: absolute;
    margin-left: 2px;
}

JavaScript

var result = document.getElementById('typebehind-result');
var source = document.getElementById('typebehind-source');

source.addEventListener('input', function() {
    // Escape any HTML in the box:
    var temp = document.createElement('div');
    temp.appendChild(document.createTextNode(source.value));
    var escapedText = temp.innerHTML;
    
    // Replace stuff, just a simple example:
    var text = escapedText.replace(/[aeiou]/gi, '<span style="color: blue;">$&</span>');
    
    // Show it:
    result.innerHTML = text;
});