Javascript 按数字突出显示字符

考虑使用以下字符串及其数值：

然后，您允许用户在文本框中键入：

1 | 17 | 7 | 19

，我如何能够突出显示文本，如下所示：

在计算空格和段落时，我可以让它工作，但当我完全删除所有空白和新行（例如“Thisissomedummytext”）时，我不知道如何实现这一点

编辑

---

到目前为止，它考虑了空格和新行（nl的计数为1个字符）。

我不确定这是否有帮助，但是：

它不是最干净的，我也不确定您是否使用了jQuery（在那里可能更容易实现）。我相信很多事情都会改变，比如这件事发生的方式/时间。为每个onkeyup事件完全重建输出可能不是最好的方法

更新：

（用于支撑空间）

最新更新：

（支持所有空格）

---

（@eminor提供了新的逻辑来解决我以前的问题）

我们有两个索引，一个用于迭代文本，另一个用于计数字符，怎么样

（我用叉子叉了你的小提琴@ianpgall）

函数更新（）{
var text=document.getElementById（“原始输入”）.value；
var mask=document.getElementById（“mod_输入”）.value.split（“|”）；
var-char=0；
var结果=“”；
对于（变量i=0；i

“char”索引对有效字符进行计数，我们在“mask”数组中查找该索引

---

“i”索引用于迭代输入文本。​

让我们看看你到目前为止有什么+1以获得非常清晰的图形。让我将我的工作JS简化为易于理解的内容。@MattBall添加了当前代码。这就是我当前的示例的工作方式（请注意，在问题中，我不将空格归类为字符）。如果我这样做：它应该突出显示“m”。哦，哦，我明白了。好吧，我会尽力的do@Prisoner刚刚用新的小提琴更新了我的答案。再说一次，我肯定这不是最干净的。我只支持空格，但一般来说，使用正则表达式捕捉空格会很容易更新。我想做很多事情让它工作。我希望这样更好！但是，如果你输入：“这是一个测试”（它漏掉了“e”），并且修饰符“8”没有突出显示“t”，这是一个不错的尝试。这有点难@囚犯再次更新与埃米诺的修复，并支持所有空格。看起来更好/更完整…不过由你决定！我不认为你救了你的叉子

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;
}