自定义内容的 Javascript 优化Editable div 实现

Question

我有一个不可内容可编辑的 div。我监听按键事件，在内存中维护一个字符串，并在设定的时间间隔内迭代该字符串并将内容爆炸到 div 的 innerHTML 中。我必须迭代该字符串，而不是简单地将 div 的 innerHTML 替换为整个字符串，因为由于我的应用程序特定的原因，我无法将 html 标签保留在内存中。因此，我迭代字符串，并用 br 标签替换换行符等。一切都工作正常，除非 div 中有相当数量的文本，应用程序会因为必须单独迭代每个字符而变慢。请参阅下面的算法了解我当前正在做的事情：

for (var i=0, len=this.value.string.length; i<len; i++) {
  var p = this.value.string[i];
  if(p['char']==this.newLine){
    if(i<start){
      a.push('<br>');
    }else if(i>end){
      c.push('<br>');
    }else{
      b.push('<br>');
    }
  }else if(p['char']==this.newSpace){
    if(i<start){
      a.push('<span>&nbsp; </span>');
    }else if(i>=end){
      c.push('<span>&nbsp; </span>');
    }else{
      b.push('<span>&nbsp; </span>');
    }
  }else{
    if(i<start){
      a.push('<span>'+p['char']+'</span>');
    }else if(i>=end){
      c.push('<span>'+p['char']+'</span>');
    }else{
      b.push('<span>'+p['char']+'</span>');
    }
  }
}

var tempA = a.join("");
var tempB = b.join("");
var tempC = c.join("");

dojo.byId('thisFrame').innerHTML = tempA;
dojo.create('span',{
        id:'selection',
        innerHTML:tempB,
        'class':'selection'
    },
    dojo.byId('thisFrame'),
    'last'
);
dojo.byId('thisFrame').innerHTML = dojo.byId('thisFrame').innerHTML + tempC;

为了更多地解释上面的代码，我检查字符的位置是否小于选择的开始和结束，以了解它是在选择之前、之后还是在选择之内。

我需要一种方法来优化它。我知道这是一个很难回答的问题，但我想我还是会问。