Hello,
I've pasted a commented function below that it intended to "highlight" the first instance of a string (global findString) that occurs in a page after a given "<A ID=..." element (global anchorID). The highlight is accomplished (theoretically) by inserting a <SPAN...> element around the target string with range.surroundContents.
I can see that the tag is being inserted (the function ends with an alert containing the innerHTML of the parentNode of the element, which shows the span tag around the target string), but unfortunately there's no change to the displayed page itself.
What's paticularly puzzling is that if I move the surroundContents method earlier so that it operates on the element anchorID it works fine. And if I manually insert the span tag around the exact same characters it also shows the change in background-color.
My target browser for this particular situation is Safari, but I'm testing in Opera 9 so I can use the Error Console (I couldn't find any error feedback in Safari).
Anything anyone can suggest would be greatly appreciated.
Thanks...
HTML Code:
var anchorID
var findString
var undoNode
// Highlight first instance of findString after start of element anchorID
function HighlightDOMRange() {
var termLength = findString.length
// create a case-insensitive string to search for in the range
var iFindString = new RegExp(findString, "i")
//alert(iFindString)
var spanTag
// initialize a range
var anchorRange = document.createRange()
// get the target element
var startElement = document.getElementById(anchorID)
// set the range to the target element
anchorRange.selectNode(startElement)
/*
// TEST ONLY: "highlight" the "<A ID=..." element anchorID
spanTag = document.createElement("span");
spanTag.style.backgroundColor = "#bfdaff";
anchorRange.surroundContents(spanTag);
*/
// expand the range to the end of the doc
anchorRange.setEndAfter(document.body.lastChild)
//alert(anchorRange.toString())
// create a document fragment from the range
var docFrag = anchorRange.cloneContents();
// create a NodeIterator from the document fragment node
var nodeIt = document.createNodeIterator(docFrag, NodeFilter.SHOW_TEXT, null, false);
// iterate through nodes in range to find node containing iFindString
var endElement
var startChar
while ((endElement = nodeIt.nextNode()) != null) {
startChar = endElement.nodeValue.search(iFindString)
if (startChar > -1) {
break
}
} // [re: while ((endElement = nodeIt.nextNode()) != null)]
var endChar = startChar + termLength
// move the start of the range to the startChar position
anchorRange.setStart(endElement,startChar);
// move the end of the range to the endChar position
anchorRange.setEnd(endElement,endChar);
// save the original innerHTML of the commonAncestor node (to restore later)
var undoNode = anchorRange.commonAncestorContainer
undoNode = undoNode.parentNode
var undoNodeHTML = undoNode.innerHTML
//alert('undoNode-PRE: ' + undoNodeHTML)
// "highlight" the range
spanTag = document.createElement("span");
spanTag.style.backgroundColor = "#bfdaff";
anchorRange.surroundContents(spanTag);
alert('undoNode-POST: ' + undoNode.innerHTML)
} // [re: function HighlightDOMRange]
Last edited by chrishirst; 04-20-2007 at 10:07 AM..
Reason: added code tags
|
