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 () {
    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

    for (var i = 0; i < orig_val.length; i++) {
        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];
        } else {
            new_node = document.createTextNode(orig_val[i]);
        }
        out.appendChild(new_node);
    }
}