Geek Answers Handbook

Highlight text in a document (JavaScript) Effectively

How can I (efficiently - not slow down the computer [cpu]) to select a certain part of the page?

Let's say my page looks like this:

<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>

My idea is to "clone" the entire body into a variable and find the specified text through indexOf, change (insert a span with the background color) the "cloned" string and replace the "real" body with the "cloned" one. I just think this is not effective.
Do you have any other ideas? (be creative :))

+1
performance javascript highlight
source share
3 answers
 <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>
+1
source share

I adapted the following of my answers to several similar questions about SO ( example ). It is intended for reuse and has proven its worth. It traverses the DOM in the node container that you specify by looking at each node text for the specified text and using the DOM methods to separate the node text and the surrounding piece of text in the <span> style.

Demo: http://jsfiddle.net/HqjZa/

the code:

 // 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");
+4
source share

Use this in combination with this , and you should be fine. (This is almost better than trying to independently implement the allocation / allocation-allocation logic).

0
source share

More articles:


All Articles