Javascript Firefox中的慢高亮显示

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

在以下代码中，所有需要突出显示的范围都存储在数组

hilitranges

：

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";
}

for（变量i=0；i0）
selHilites.removeAllRanges（）；
selHilites.addRange（Hilitranges[i]）；
var anchorId=‘索引’+i；
var insertedHTML=''+hilitranges[i].toString（）+''；
document.execCommand（'inserthtml'，false，insertedHTML）；
document.designMode=“关闭”；
}

---

有没有办法加快处理速度？我们可以在数组

hilitranges

中有数百个范围。我们曾经尝试将

designMode

设置移到循环之外，但在循环运行时，我们可以看到html页面中的某些部分是可编辑的。

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

演示：

功能突出显示（文本、单词、标记）{
//如果未提供标记，则为默认标记
标记=标记| |“span”；
变量i，len=单词长度，re；
对于（i=0；i

以及解除高照：

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, '');
}

功能取消高亮显示（文本、标记）{
//如果未提供标记，则为默认标记
标记=标记| |“span”；
var re=new RegExp（“（|”），“g”）；
返回文本。替换（重“”）；
}

无需为此使用

document.execCommand（）

。只需使用范围方法，就不需要

designMode

var anchorId, hiliteTextNode, hiliteSpan;
for (var i = 0; i < hiliteRanges.length; i++){
    // Create the highlight element
    hiliteSpan = document.createElement("span");
    hiliteSpan.id = anchorId;
    hiliteSpan.style.backgroundColor = "#FF8C00";

    hiliteTextNode = document.createTextNode(hiliteRanges[i].toString());
    hiliteSpan.appendChild(hiliteTextNode);

    // Replace the range content
    hiliteRanges[i].deleteContents();
    hiliteRanges[i].insertNode(hiliteSpan);
}

var anchorId，hilitextnode，hilitestpan；
对于（变量i=0；i

此外，由于范围受DOM变异的影响，我建议在使用

window.find（）

收集范围的同时执行此部分。下面是一个例子：

---

相关：为什么不使用

contentEditable

？或者这与

designMode

方法有什么关系？这是您正在做的适当演示吗？事实上，我首先使用FF的window.find方法搜索关键字，并将所有选定的范围存储到数组Hilitranges中。然后我想突出显示FF中所有这些选定的范围。我可以在这些选定的范围内使用contentEditable吗？firefox上的javascript引擎比ie和chrome都慢，问题纯粹是处理太多。将尽可能多的代码移出for循环，并尽可能多地重构代码。@SaintGerbil这与JavaScript无关；真正的问题是反复打开和关闭所有的编辑机器。另一方面，Firefox中的JS引擎实际上比IE更快，与Chrome差不多，这取决于你用它做什么。谢谢。但是数组包含所有选定的范围，这些范围是使用window.find方法而不是字符串收集的。从数据中生成字符串数组应该不会太难。是的。也许只需要获取每个范围的parentElement，然后替换其innerHTML。修改是否会影响其他范围？我不确定这些范围的位置是否会混乱。。。如果是这样，parentelement将是错误的。例如，如果我们更改范围Hilitranges[0]的容器的innerHTML，我们仍然可以获得范围Hilitranges[1000]的正确容器吗？基本上，数组Hilitranges中的范围是随机的。

window.find（）

方法的优点是，可以匹配跨越元素边界的文本，这在这种方法中是不可能的。但是，

window.find（）

将来可能会消失：选择find（）方法的优点是我们不需要担心html标记和js标记。查找/搜索关键字要容易得多。不要让它消失…这个解决方案看起来很有希望。我现在就试试。谢谢

var anchorId, hiliteTextNode, hiliteSpan;
for (var i = 0; i < hiliteRanges.length; i++){
    // Create the highlight element
    hiliteSpan = document.createElement("span");
    hiliteSpan.id = anchorId;
    hiliteSpan.style.backgroundColor = "#FF8C00";

    hiliteTextNode = document.createTextNode(hiliteRanges[i].toString());
    hiliteSpan.appendChild(hiliteTextNode);

    // Replace the range content
    hiliteRanges[i].deleteContents();
    hiliteRanges[i].insertNode(hiliteSpan);
}