GetTextNodesByValue( strText, objNode ) : DHTML Snippets : Kinky Solutions : A Student's Perspective by Ben Nadel

GetTextNodesByValue( strText, objNode )

Snippets Overview

ColdFusion

DHTML

Flash

Javascript Library

Downloadable Files

gettextnodesbyvalue_function1.htm ( 7,481 Bytes )

GetTExtNodesByValue() searches through the document object model (DOM) looking for text nodes that contain the given text string. All that is required is the target string argument "strText". As an option, you can pass a root DOM node, "objNode," to start with. If you do not provide this node, the function will default to the BODY tag and search everything within it. Currently, the search is case insensitive. It will match uppercase and lowercase versions of the target string. The method will return an array of nodes. If no matching text nodes were found, the method will return an empty array.

One of the really interesting things about this method is its use of the sub-function, SearchNodeForText(), which is defined within the main function and called recursively. Because this is a sub-function, it has both a local scope and access to its parent's scope. Since this is somewhat new for me, I am not using best practices for passing arguments to the sub-function. For instance, I pass the array of text nodes, but not the search text. From a practical standpoint, neither is required since they are available in the parent's scope; however, passing or not, they should be consistent.

Note: Since I first posted this, I have found some bugs and some things that were not 100% cross-browser compatible. I have since updated the code below and the attached demo. It should now work in Win IE, FireFox and Mac IE, Safari, and FireFox.

function GetTextNodesByValue( strText, objNode ){
var arrTextNodes = new Array();
// Check to see if the starting node was passed. If it was not, then
// default it to the document body node.
if (objNode == null){
objNode = document.getElementsByTagName( "body" )[0];
}
// Lowercase the search string.
strText = strText.toLowerCase();
// Create a sub-function to recursively search through text nodes.
function SearchNodeForText( objNode, arrTextNodes ){
var intI = 0;
var objChild = null;
// Make sure we have a structured node.
if (objNode.nodeType == 1){
// Loop over children of this node looking for text nodes. If we come across
// a non-text node, then find the text nodes in that one.
for (intI = 0 ; intI < objNode.childNodes.length ; intI++){
// Get a pointer to the current child.
objChild = objNode.childNodes[ intI ];
// Check the child node type.
if (objChild.nodeType == 1){
// We found a structured node. Search this node for the text.
SearchNodeForText( objChild, arrTextNodes );
} else if (objChild.nodeType == 3){
// We have found a text node. Check to see if this node has the
// value we are looking for.
if (objChild.nodeValue.toLowerCase().indexOf( strText ) >= 0){
// This text node has the appropriate string. Add it to the text nodes array.
arrTextNodes[ arrTextNodes.length ] = objChild;
}
}
}
}
}
// Call the sub-function directly.
SearchNodeForText( objNode, arrTextNodes );
// Return the matching text nodes.
return( arrTextNodes );
}

Added May 10, 2006 / Updated May 11, 2006