2

htmlページのいくつかのキーワード/文にアンカーとハイライトを追加する必要があります。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ページで編集可能であることがわかります。

4

2 に答える 2

2

これは私のデフォルトのハイライトスニペットであり、すべてのブラウザで正常に機能します。やってみよう。

デモ： 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, '');
}
于 2012-09-20T03:19:21.523 に答える
0

これに使用する必要はありませんdocument.execCommand()。代わりにrangeメソッドを使用するだけで、。は必要ありません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);
}

また、範囲はDOMミューテーションの影響を受けるため、で範囲を収集すると同時にこの部分を実行することをお勧めしますwindow.find()。次に例を示します。

http://jsfiddle.net/YgFjT/

于 2012-09-20T08:50:56.840 に答える