凸顯文件（JavaScript）的文本高效

我怎麼能（有效 - 不降低計算機[CPU]）突出一個頁面的特定部分？凸顯文件（JavaScript）的文本高效

比方說，我的網頁是這樣：

<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查找指定的文本，改變（插入一個跨度有背景 - 顏色）「克隆」字符串，並用「克隆」字體替換「真實」身體。
我只是覺得它是沒有效率。
你有什麼其他的想法？（有創意:)）

來源

2012-05-16 funerr

<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-16 12:33:15 foued611

謝謝我看到這個作品，但效率呢？ – funerr

您的效率問題是什麼？ _Efficient_本身並不能提供足夠的信息。 – SelimOber

@SelimOber，我的意思是由有效的： - 低的CPU消耗 – funerr

使用this結合this，你應該是相當好的。（它比嘗試自己實現選擇/選擇 - 突出顯示邏輯要好得多。）

來源

2012-05-16 12:23:12 Styxxy

不，不是我所需要的。 – funerr

我對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-16 12:28:25

我的問題是我不知道父節點。所以在這方面它不會那麼高效。 – funerr

@ agam360：你不需要知道父節點，只有上層節點。你也需要一個'innerHTML'解決方案，而我的解決方案通常會比基於'innerHTML'的解決方案強大得多，並且更健壯（想象一個包含搜索項的屬性）。 –

在重新包裝之前，你如何清理被包裝的東西？看[demo]（http://jsbin.com/hizihoq/edit?html,js,output） – vsync

凸顯文件（JavaScript）的文本高效

回答

相關問題