Copy codeThe Code is as follows:
<Script language = "JavaScript">
Function findAll (s ){
If (s. length = 0 ){
Alert ("Enter the query keyword ");
}
S = encode (s );
Var TDs = document. all. DataT1.all. tags ("TD ");
Var num = 0;
For (var I = 0; I <TDs. length; I ++ ){
Var tdObj = TDs [I];
Var obj = tdObj. childNodes [0];
If (! Obj. className | obj. className! = "Highlight "){
Var t = obj. innerHTML. replace (/<span \ s + class = .? Highlight.?> ([^ <>] *) <\/Span>/gi, "$1 ");
Obj. innerHTML = t;
Var cnt = loopSearch (s, obj );
T = obj. innerHTML;
Var r =/{searchHL }(({(?! \/SearchHL}) | [^ {]) *) {\/searchHL}/g;
T = t. replace (r, "<span class = 'highlight'> $1 </span> ");
Obj. innerHTML = t;
Num = num + cnt;
}
}
Alert ("keyword found" + num + ");
}
Function encode (s ){
Return s. replace (// g ,"&"). replace (/</g, "<"). replace (/>/g, "> "). replace (/([\\\. \ * \ [\] \ (\) \ $ \ ^])/g, "\ $1 ");
}
Function decode (s ){
Return s. replace (/\\([\\\. \ * \ [\] \ (\) \ $ \ ^])/g, "$1 "). replace (/>/g, "> "). replace (/</g, "<"). replace (// g ,"&");
}
Function loopSearch (s, obj ){
Var cnt = 0;
If (obj. nodeType = 3 ){
Cnt = replace (s, obj );
Return cnt;
}
For (var I = 0, c; c = obj. childNodes [I]; I ++ ){
If (! C. className | c. className! = "Highlight ")
Cnt + = loopSearch (s, c );
}
Return cnt;
}
Function replace (s, dest ){
Var r = new RegExp (s, "gi ");
Var tm = null;
Var t = dest. nodeValue;
Var cnt = 0;
Var arr = new Array ();
Var a = "";
Var B = "";
If (tm = t. match (r )){
Cnt = tm. length;
A = tm. toString ();
Arr = a. split (",");
For (var I = 0; I <arr. length; I ++)
B = "{searchHL}" + arr [I] + "{/searchHL }";
T = t. replace (r, B );
Dest. nodeValue = t;
}
Return cnt;
}
</Script>
<Style type = "text/css">
. Highlight {background: blue; font-weigh: bold; color: black ;}
</Style>
Note the following two points for the above method: 1. Get the smallest unit of obj in findAll; otherwise, the replacement will be messy. In practice, I have learned that this is mainly related to data island binding, general text does not need to be so careful. 2. The replace method splits the tm into an array, which is also related to tables. Normal text does not need to be split.
For general text, you can write the following:
Copy codeThe Code is as follows:
<Script language = "JavaScript">
Function findAll (s ){
If (s. length = 0 ){
Alert ('search keyword not filled! ');
Return false;
}
S = encode (s );
Var obj = document. getElementsByTagName ("body") [0];
Var t = obj. innerHTML. replace (/<span \ s + class = .? Highlight.?> ([^ <>] *) <\/Span>/gi, "$1 ");
Obj. innerHTML = t;
Var cnt = loopSearch (s, obj );
T = obj. innerHTML
Var r =/{searchHL }(({(?! \/SearchHL}) | [^ {]) *) {\/searchHL}/g
T = t. replace (r, "<span class = 'highlight'> $1 </span> ");
Obj. innerHTML = t;
Alert ("keyword found" + cnt + ")
}
Function replace (s, dest ){
Var r = new RegExp (s, "g ");
Var tm = null;
Var t = dest. nodeValue;
Var cnt = 0;
If (tm = t. match (r )){
Cnt = tm. length;
T = t. replace (r, "{searchHL}" + decode (s) + "{/searchHL }")
Dest. nodeValue = t;
}
Return cnt;
}
</Script>
Html section
Copy codeThe Code is as follows:
<Xml id = "DataBinding1" SRC = "datasource. xml"> </XML>
<Body>
<Input name = "s" id = "s" title = "search content:"/> <input type = "submit" value = "Search" onClick = "findAll (s. value); return false; "/>
<Table width = "100%" valign = "top" DATASRC = "# DataBinding1" id = "DataT1" BORDER = "1" CELLPADDING = "3">
<Thead>
<Tr>
<Th> ID </th>
<Th> Name </th>
<Th> Desc </th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td> <span name = "ID" id = "ID" dataworks = "CODE_ID"> </span> </td>
<Td> <span name = "name" id = "name" data== "CODE_NAME"> </span> </td>
<Td> <span name = "desc" id = "desc" dataworks = "CODE_DESC"> </span> </td>
</Tr>
</Tbody>
</Table>
</Body>
Copy codeThe Code is as follows:
<? Xml version = "1.0" encoding = "UTF-8"?>
<INVENTORY>
<ROW>
<CODE_ID> PCOMM11 </CODE_ID>
<CODE_NAME> caracter handle </CODE_NAME>
<CODE_DESC> hkdlhglfghfkgfk </CODE_DESC>
</ROW>
<ROW>
<CODE_ID> PCOMM12 </CODE_ID>
<CODE_NAME> digital handle </CODE_NAME>
<CODE_DESC> hkdlhglfghfkgfkgggg </CODE_DESC>
</ROW>
</INVENTORY>