javascript - 按数字突出显示字符

Question

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

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

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

编辑

这是我到目前为止所拥有的，它考虑了空格和换行符（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”索引用于迭代输入文本。​</p>