JSFiddle - React, Tailwind, and code Playground

HTML

Input:
<input type="text" id="orig_input" />
<br />
Modifiers:
<input type="text" id="mod_input" />
<br /><br />
Output:
<div id="output"></div>

CSS

.mod {
    color: #ff0000;
}

JavaScript

window.onload = function () {
    document.getElementById("orig_input").onkeyup = update;
    document.getElementById("mod_input").onkeyup = update;
};

function update() {
    var text = document.getElementById("orig_input").value;
    var mask = document.getElementById("mod_input").value.split("|");

    var char = 0;
    var result = '';
    for (var i = 0; i < text.length; i++) {
        if (/\s/.test(text[i])) {
            result += text[i];
            continue;
        }

        char++;

        if (mask.indexOf(char) === -1)
            result += text[i];
        else
            result += '<span class="mod">' + text[i] + '</span>';
    }

    document.getElementById("output").innerHTML = result;
}