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

#output {
    font-size: 150%;
}

.mod {
    color: #ff0000;
}

JavaScript

window.onload = function () {
    var orig = document.getElementById("orig_input");
    orig.onkeyup = function () {
        changeText();
    };
    
    var mod = document.getElementById("mod_input");
    mod.onkeyup = function () {
        changeText();
    };
};

function changeText() {
    var orig = document.getElementById("orig_input");
    var orig_val = orig.value;
    
    var mod = document.getElementById("mod_input");
    var mod_val = mod.value;
    var mod_split = mod_val.split("|");
    
    var out = document.getElementById("output");
    out.innerHTML = "";    // Clear original contents

    var offset = 0;
    for (var i = 0, len = orig_val.length; i < len; i++) {
        var j = i;
        while (orig_val[j] == " ") {
            var space_node = document.createTextNode(" ");
            out.appendChild(space_node);
            j++;
            offset++;
        }
        
        if (i+offset < len) {
            var new_node;
            if (mod_split.indexOf("" + (i+1)) > -1) {
                new_node = document.createElement("span");
                new_node.className = "mod";
                new_node.innerHTML = orig_val[i+offset];
            } else {
                new_node = document.createTextNode(orig_val[i+offset]);
            }
            out.appendChild(new_node);
        }
    }
}