1

ページの特定の部分を (効率的に - コンピュータ [CPU] の速度を落とさずに) ハイライト表示するにはどうすればよいですか?

私のページがそうであるとしましょう：

<html>
<head>
</head>
<body>
"My generic words would be selected here" !.
<script>
//highlight code here
var textToHighlight = 'selected here" !';
//what sould I write here?
</script>
</body>
</html>

私の考えは、すべての本体を変数に「複製」し、指定されたテキストの indexOf を介して検索し、「複製された」文字列を変更 (背景色のスパンを挿入) し、「実際の」本体を「複製された」ものに置き換えることです。 .
効率が悪いとしか思えない。
他にアイデアはありますか？（クリエイティブに ：） ）

4

3 に答える 3

5

SOに関するいくつかの同様の質問に対する私の回答から以下を適応させました（example）。再利用できるように設計されており、そうであることが証明されています。指定したコンテナ ノード内の DOM をトラバースし、各テキスト ノードで指定したテキストを検索し、DOM メソッドを使用してテキスト ノードを分割し、関連するテキストのチャンクをスタイル付き<span>要素で囲みます。

デモ: http://jsfiddle.net/HqjZa/

コード：

// Reusable generic function
function surroundInElement(el, regex, surrounderCreateFunc) {
    // script and style elements are left alone
    if (!/^(script|style)$/.test(el.tagName)) {
        var child = el.lastChild;
        while (child) {
            if (child.nodeType == 1) {
                surroundInElement(child, regex, surrounderCreateFunc);
            } else if (child.nodeType == 3) {
                surroundMatchingText(child, regex, surrounderCreateFunc);
            }
            child = child.previousSibling;
        }
    }
}

// Reusable generic function
function surroundMatchingText(textNode, regex, surrounderCreateFunc) {
    var parent = textNode.parentNode;
    var result, surroundingNode, matchedTextNode, matchLength, matchedText;
    while ( textNode && (result = regex.exec(textNode.data)) ) {
        matchedTextNode = textNode.splitText(result.index);
        matchedText = result[0];
        matchLength = matchedText.length;
        textNode = (matchedTextNode.length > matchLength) ?
            matchedTextNode.splitText(matchLength) : null;
        surroundingNode = surrounderCreateFunc(matchedTextNode.cloneNode(true));
        parent.insertBefore(surroundingNode, matchedTextNode);
        parent.removeChild(matchedTextNode);
    }
}

// This function does the surrounding for every matched piece of text
// and can be customized  to do what you like
function createSpan(matchedTextNode) {
    var el = document.createElement("span");
    el.style.backgroundColor = "yellow";
    el.appendChild(matchedTextNode);
    return el;
}

// The main function
function wrapText(container, text) {
    surroundInElement(container, new RegExp(text, "g"), createSpan);
}

wrapText(document.body, "selected here");
于 2012-05-16T12:28:25.950 に答える
1 
<html>
<head>
</head>
<body>
<p id="myText">"My generic words would be selected here" !.</p>
<script>
//highlight code here
var textToHighlight = 'selected here" !';
var text = document.getElementById("myText").innerHTML
document.getElementById("myText").innerHTML = text.replace(textToHighlight, '<span style="color:red">'+textToHighlight+'</span>');
//what sould I write here?
</script>
</body>
</html>
于 2012-05-16T12:33:15.663 に答える
0

これとこれを組み合わせて使用​​すると、かなり問題ないはずです。(選択/選択の強調表示ロジックを自分で実装しようとするよりも、ほとんど優れています。)

于 2012-05-16T12:23:12.813 に答える