Musimy dodawać kotwice i podkreśla na niektóre słowa kluczowe / zdania na stronie HTML. Okazuje się, że podświetlanie jest naprawdę wolno w Firefoksie.

W poniższym kodzie wszystkie zakresy, które muszą być podświetlone, są przechowywane w tablicy {x0}}:

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

Czy jest jakiś sposób na przyspieszenie przetwarzania? Możemy mieć setki zakresów w tablicy {x0}}. Kiedyś próbowaliśmy przenieść ustawienie designMode poza pętlą, ale widzimy pewne sekcje są edytowalne na stronie HTML, gdy pętla działa.

2
user1684732 20 wrzesień 2012, 07:11

2 odpowiedzi

Najlepsza odpowiedź

Nie ma potrzeby korzystania z document.execCommand(). Zamiast tego użyj metod zasięgu, a następnie nie ma potrzeby 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);
}

Ponadto, ponieważ dotknięte są mutacje Doma, sugerowałem wykonanie tej części w tym samym czasie, gdy zbierasz zakresy z window.find(). Oto przykład:

http://jsfiddle.net/ygfjt/

0
Tim Down 20 wrzesień 2012, 09:07