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

TextNodeInsertTags( objNode, strText, strTagName, objProperties )

Snippets Overview

ColdFusion

DHTML

Flash

Javascript Library

Downloadable Files

textnodeinserttags_function.htm ( 11,806 Bytes )

TextNodeInsertTags() inserts a tag around the given substring found in the given text node in the document object model (DOM). You must pass in the text node "objNode", the target text, "strText", and the tag name "strTagName." Optionally, you can pass in an object that contains key-value pairs to initialize the tag. The options structure can be one or two levels deep (a structure containing a structure).

The tag insertion does this by actually creating new element nodes and breaking apart text nodes. I do not like to use the innerHTML directive as I do not think it is a supported standard.

There seems to be a problem with this method and Internet Explorer on both Windows and the Mac. If I break a text node up into say, 2 text nodes and a Span element via Javascript, then the parent node does realize that it has three children. However, when matching text in the first text node, it will use the original text (before breaking it up) to match the substring. Additionally, if you are looping through the children of the parent node, it will do what it previously mentioned, but it will also mactch the text on the nodeValue of the Span element. So basically it is matching a string twice, once for the original value and once for the modified DOM structure.

IE on Mac also is doing something crazy about reversing some letter in the replaced text. IE on Mac is just lame.

function TextNodeInsertTags( objNode, strText, strTagName, objProperties ){
var objElement = null;
var arrNewNodes = new Array();
var strTestingText = ("|" + objNode.nodeValue.toLowerCase() + "|");
var arrParts = strTestingText.split( strText.toLowerCase() );
var objParentNode = objNode.parentNode;
var objNextSibling = objNode.nextSibling;
var intStart = 0;
var intI = 0;
var intIndexOf = 0;
var strKey, strSubKey = "";
// Check to make sure we have more than one occurance.
if (arrParts.length > 1){
// Loop over the parts of the text to create the proper elements.
for (intI = 0 ; intI < arrParts.length ; intI++){
// Check to see if we have to remove the pipe.
if (intI == 0){
// Replace out the leading pipe.
arrParts[ 0 ] = arrParts[ 0 ].substring( 1, arrParts[ 0 ].length );
}
if (intI == (arrParts.length - 1)){
// Replace out the trailing pipe.
arrParts[ intI ] = arrParts[ intI ].substring( 0, (arrParts[ intI ].length - 1) );
}
// Check to see if we have a length remaining in the text part.
if (arrParts[ intI ].length > 0){
// Add the text node to the new nodes.
arrNewNodes[ arrNewNodes.length ] = document.createTextNode(
objNode.nodeValue.substring( intStart, (intStart + arrParts[ intI ].length) )
);
// Update the start value.
intStart += (arrParts[ intI ].length);
}
// Check to see if we should add the matching node. We only want to do this if
// we are NOT at the end of the parts list.
if (intI < (arrParts.length - 1)){
// Create the element.
objElement = document.createElement( strTagName );
// Check to see if we have any properties to apply.
if (objProperties){
// Loop over properties and add them to the element.
for (strKey in objProperties){
// Check to see if the property is an object. If it is an object, then
// we will have to loop through the object as oppossed to just setting
// the value.
if (typeof( objProperties[ strKey ] ) == "object"){
for (strSubKey in objProperties[ strKey ]){
objElement[ strKey ][ strSubKey ] = objProperties[ strKey ][ strSubKey ];
}
} else {
objElement[ strKey ] = objProperties[ strKey ];
}
}
}
// Add the text to the node.
objElement.appendChild(
document.createTextNode(
objNode.nodeValue.substring( intStart, (intStart + strText.length) )
)
);
// Add that element to the new nodes.
arrNewNodes[ arrNewNodes.length ] = objElement;
// Update the start value.
intStart += (strText.length);
}
}
// Remove this node from the parent node.
objParentNode.removeChild( objNode );
// Now, loop over the new nodes and add to the parent.
for (intI = 0 ; intI < arrNewNodes.length ; intI++){
// Check to see if we have a next sibling. If we have one, insert before that one.
// If we do not have a sibling, then append to end of the parent node.
if (objNextSibling != null){
objParentNode.insertBefore( arrNewNodes[ intI ], objNextSibling );
} else {
objParentNode.appendChild( arrNewNodes[ intI ] );
}
}
}
// Return out.
return;
}

Added May 10, 2006 / Updated May 11, 2006