按数字突出显示字符

Question

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

然后，您允许用户输入文本框：1|17|7|19，我如何能够突出显示文本，如下所示：

我可以在空格和段落中计算它，但是当我完全删除所有空格和新行（例如“Thisissomedummytext”）时，我无法弄清楚如何实现这一点。

修改

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

Answer 1

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

http://jsfiddle.net/mCsuH/1/

这不是最干净的，我不确定你是否使用jQuery（它可能更容易做）。我相信会有很多变化，比如这个事件发生的时间/时间。对于每个onkeyup事件，完全重建输出可能不是最好的。

更新：

（支持空间）

http://jsfiddle.net/mCsuH/2/

新更新：

（支持所有空格）

http://jsfiddle.net/4HFLx/1/

（实际修复我之前由@eminor提供的问题的新逻辑）

Answer 2

有两个索引，一个用于迭代文本而另一个用于计算字符？

（我把你的小提琴分开了@ianpgall）

http://jsfiddle.net/FZHuj/1/

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

“char”索引计算有效字符，我们在“mask”数组中查找此索引。

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