Question

我有一个不 contentEditable的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;

为了解释上述代码，我会检查角色的位置是否小于选择的开始和结束，以确定它是在选择之前，之后还是之内。

我需要一种优化方法。我知道这是一个棘手的问题，但我想我还是会问。

自定义contentEditable div实现的Javascript优化

0 个答案: