javascript - Firefox 中高亮显示缓慢

Question

我们需要为html页面中的一些关键词/句子添加 anchor 和高亮。事实证明，Firefox 中的突出显示速度非常慢。

在下面的代码中，所有需要高亮的范围都存储在数组hiliteRanges中:

for (var i = 0; i < hiliteRanges.length; i++){
    document.designMode = "on";

    var selHilites = window.getSelection();

    if (selHilites.rangeCount > 0)
        selHilites.removeAllRanges();

    selHilites.addRange(hiliteRanges[i]);

    var anchorId = 'index'+i;
    var insertedHTML = '<span id="' + anchorId + '" style="background-color: #FF8C00;" >'+hiliteRanges[i].toString()+'</span>';

    document.execCommand('inserthtml', false, insertedHTML);                                                                                    
    document.designMode = "off";
}

有什么办法可以加快处理速度吗？我们可以在数组 hiliteRanges 中有数百个范围。我们曾经尝试将 designMode 设置移到循环之外，但我们可以看到循环运行时 html 页面中的某些部分是可编辑的。

Answer 1

这是我的默认突出显示片段，在每个浏览器中都可以正常工作。试试吧。

演示: http://jsbin.com/adeneh/1/edit

function highlight(text, words, tag) {

  // Default tag if no tag is provided
  tag = tag || 'span';

  var i, len = words.length, re;
  for (i = 0; i < len; i++) {
    // Global regex to highlight all matches
    re = new RegExp(words[i], 'g');
    if (re.test(text)) {
      text = text.replace(re, '<'+ tag +' class="highlight">$&</'+ tag +'>');
    }
  }

  return text;
}

// Usage:
var el = document.getElementById('element');
el.innerHTML = highlight(
  el.innerHTML, 
  ['word1', 'word2', 'phrase one', 'phrase two', ...]
);

取消突出显示:

function unhighlight(text, tag) {
  // Default tag if no tag is provided
  tag = tag || 'span';
  var re = new RegExp('(<'+ tag +'.+?>|<\/'+ tag +'>)', 'g');
  return text.replace(re, '');
}