|
每次搜索都存储在每次调用 processSearch 时都要删除的 lastSearch 变量中.删除后,如果只有一个查询词或者如果需要 twoWordSearch 函数或 grep -v 函数,则使用 oneWordSearch 高亮显示搜索查询.清单 5 显示了关于 removeIndicators 函数的详细信息.
清单 5. removeIndicators 函数
function removeIndicators( textIn )
{
// use XPath to quickly extract all of the rendered text
var textNodes = document.evaluate( ''//text()'', document, null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null );
for (var i = 0; i < textNodes.snapshotLength; i )
{
textNode = textNodes.snapshotItem(i);
if( textNode.data.indexOf( textIn ) != -1 )
{
// find the appropriate parent node with the innerHTML to be removed
var getNode = getHtml( textNode );
if( getNode != null )
{
var temp = getNode.parentNode.innerHTML;
var reg = new RegExp( highStart, "g");
temp = temp.replace( reg, "" );
reg = new RegExp( highEnd, "g");
temp = temp.replace( reg, "" );
getNode.parentNode.innerHTML = temp;
}//if correct parent found
}//if word found
}//for each text node
}//removeIndicators
| 使用 removeIndicators 无需手动遍历 DOM 树,而是使用 XPath 快速提取文档中的文本节点.如果某个文本节点包含 lastSearch 文本（最近高亮显示的词）,则 getHtml 将查找相应的父节点,并且删除高亮显示的文本.注意,将 innerHTML 的提取与 innerHTML 的分配合并为一个步骤将带来各种各样的问题,因此需要将 innerHTML 临时指定为外部变量.清单 6 是 getHtml 函数,该函数将详细展示如何查找相应的父节点.
清单 6. getHtml 函数
function getHtml( tempNode )
{
// walk up the tree to find the appropriate node
var stop = 0;
while( stop == 0 )
{
if( tempNode.parentNode != null &&
tempNode.parentNode.innerHTML != null )
{
// make sure it contains the tags to be removed
if( tempNode.parentNode.innerHTML.indexOf( highStart ) != -1 )
{
// make sure it''s not the title or greppishFind UI node
if( tempNode.parentNode.innerHTML.indexOf( "<title>" ) == -1 &&
tempNode.parentNode.innerHTML.indexOf("btnHighlight") == -1)
{
return( tempNode );
}else{ return(null); }
// the highlight tags were not found, so go up the tree
}else{ tempNode = tempNode.parentNode; }
// stop the processing when the top of the tree is reached
}else{ stop = 1; }
}//while
return( null );
}//getHtml
|
在遍历 DOM 树搜索 innerHTML 以插入高亮显示的标签时, 忽略两个特定节点.不应当更新包含 title 和 btnHighlight 的节点, 这些节点中的更改将导致文档无法正常显示.当找到正确的节点时,无论 DOM 树中的父节点有多少个,都返回节点并删除高亮显示.清单 7 是向文档中添加高亮显示的第一个函数.
清单 7. oneWordSearch 函数
function oneWordSearch( textIn )
{
// use XPath to quickly extract all of the rendered text
var textNodes = document.evaluate( ''//text()'', document, null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null );
for (var i = 0; i < textNodes.snapshotLength; i )
{
textNode = textNodes.snapshotItem(i);
if( textNode.data.indexOf( textIn ) != -1 )
{
highlightAll( textNode, textIn );
}//if word found
}//for each text node
}//oneWordSearch
| |
