javascript – 如何在输入时设置文本输入的样式？

每次我在输入字段中输入一个字符时,我都会解析表达式,以便得到：

>一组标记,即tokenArray = [2,*,COS,(,4,)]
>相应的令牌类型数组,即tokenType = [NUMBER,OPERATOR,FUNCTION,NUMBER,)]

我需要根据各自的令牌类型设置每个令牌的样式(例如为每个令牌分配不同的颜色).

我已经能够轻松地在不同的< div>中设置输入文本的动态副本. (不是输入文本本身,这是我要求的帮助)如下：

JavaScript的：

function processExpression() {
    var userInput = document.getElementById('inputText').value;

        var resultOutput =  parse(userInput); //this generates the two arrays described above

        for (i in tokenArray) 
          newHTML += "<span style='color: " + colorMap[ tokenType[i] ] + " '>" +  tokenArray[i] + "</span>";

          document.getElementById('styledExpression').innerHTML = newHTML; 
}

HTML：

<input type="text" id="inputText" value="" placeholder="Type expression" size="40"
        onKeyDown="processExpression();" 
        onKeyUp="processExpression();"/>

<div id="styledExpression" value=""></div>

如何直接在输入的输入字段中设置输入文本的样式？
任何JavaScript解决方案？

UPDATE

蒂姆对问题replace innerHTML in contenteditable div的回答提供了一些很好的帮助.

你如何修改http://jsfiddle.net/2rTA5/2/以解决在每个keydown时,一个解析整个可编辑的？例如,假设您键入“= if(AND(3 = 2,A1：A4,OR(0,1)),5,6)”,并且在每次keydown时,editable都会以编程方式重写(请参阅上面的标记说明) )我失去了光标.

该解决方案如何忽略令牌或字符或节点的类型,只需保存并恢复keydown之前的绝对光标(从头开始)？

解决方法

文本输入不支持样式内容.故事结局.

常见的解决方案是使用contenteditable代替.