Skip to content Skip to sidebar Skip to footer
Home / Highlight / Javascript / Performance

Highlighting Text In Document (javascript) Efficiently

Post a Comment
How can I (efficiently - not slowing the computer [cpu]) highlight a specific part of a page? Lets say that my page is as so: <

Solution 1:

I've adapted the following from my answers to several similar questions on SO (example). It's designed to be reusable and has proved to be so. It traverses the DOM within a container node you specify, searching each text node for the specified text and using DOM methods to split the text node and surround the relevant chunk of text in a styled <span> element.

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

Code:

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

// Reusable generic functionfunctionsurroundMatchingText(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 likefunctioncreateSpan(matchedTextNode) {
    var el = document.createElement("span");
    el.style.backgroundColor = "yellow";
    el.appendChild(matchedTextNode);
    return el;
}

// The main functionfunctionwrapText(container, text) {
    surroundInElement(container, newRegExp(text, "g"), createSpan);
}

wrapText(document.body, "selected here");

Solution 2: 

<html><head></head><body><pid="myText">"My generic words would be selected here" !.</p><script>//highlight code herevar textToHighlight = 'selected here" !';
var text = document.getElementById("myText").innerHTMLdocument.getElementById("myText").innerHTML = text.replace(textToHighlight, '<span style="color:red">'+textToHighlight+'</span>');
//what sould I write here?</script></body></html>

Solution 3:

Use this in combination with this and you should be pretty ok. (It is almost better than trying to implement selection / selection-highlighting logic yourself.)

Post a Comment for "Highlighting Text In Document (javascript) Efficiently"