Copy codeThe Code is as follows: <! Doctype html public "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> JS keyword highlighting </title>
<Script type = "text/javascript">
/*
* Parameter description:
* Obj: object. html tag nodes to be highlighted.
* HlWords: String. Keywords to be highlighted. Multiple words are separated by vertical bars (|) or spaces.
* BgColor: Specifies the background color. The default value is red.
*/
Function MarkHighLight (obj, hlWords, bgColor ){
HlWords = AnalyzeHighLightWords (hlWords );
If (obj = null | hlWords. length = 0)
Return;
If (bgColor = null | bgColor = ""){
BgColor = "red ";
}
MarkHighLightCore (obj, hlWords );
// Core method for executing the highlighted mark
Function MarkHighLightCore (obj, keyWords ){
Var re = new RegExp (keyWords, "I ");
Var style = 'style = "background-color: '+ bgColor + ';"'
For (var I = 0; I <obj. childNodes. length; I ++ ){
Var childObj = obj. childNodes [I];
If (childObj. nodeType = 3 ){
If (childObj. data. search (re) =-1) continue;
Var reResult = new RegExp ("(" + keyWords + ")", "gi ");
Var objResult = document. createElement ("span ");
ObjResult. innerHTML = childObj. data. replace (reResult, "<span" + style + ">1 1 </span> ");
If (childObj. data = objResult. childNodes [0]. innerHTML) continue;
Obj. replaceChild (objResult, childObj );
} Else if (childObj. nodeType = 1 ){
MarkHighLightCore (childObj, keyWords );
}
}
}
// Analysis keywords
Function AnalyzeHighLightWords (hlWords ){
If (hlWords = null) return "";
HlWords = hlWords. replace (/\ s +/g, "|"). replace (/\ | +/g, "| ");
HlWords = hlWords. replace (/(^ \ | *) | (\ | * $)/g ,"");
If (hlWords. length = 0) return "";
Var wordsArr = hlWords. split ("| ");
If (wordsArr. length> 1 ){
Var resultArr = BubbleSort (wordsArr );
Var result = "";
For (var I = 0; I <resultArr. length; I ++ ){
Result = result + "|" + resultArr [I];
}
Return result. replace (/(^ \ | *) | (\ | * $)/g ,"");
} Else {
Return hlWords;
}
}
// Put long keywords in front of the bubble sort method
Function BubbleSort (arr ){
Var temp, exchange;
For (var I = 0; I <arr. length; I ++ ){
Exchange = false;
For (var j = arr. length-2; j> = I; j --){
If (arr [j + 1]. length)> (arr [j]). length ){
Temp = arr [j + 1]; arr [j + 1] = arr [j]; arr [j] = temp;
Exchange = true;
}
}
If (! Exchange) break;
}
Return arr;
}
}
// End
Function search (){
Var obj = document. getElementById ("waiDiv ");
Var keyWord = document. getElementById ("keyWord ");
MarkHighLight (obj, keyWord. value, "Orange ");
}
</Script>
</Head>
<Body>
<Div id = "waiDiv">
<Input type = "text" id = "keyWord"/>
<Input type = "button" value = "search" onclick = "search ()"/> <br/>
<Br/>
<Div id = "contentDiv">
A friend of two goods was cheated on 1200 game items. After the alarm, he was told that there was no way to file a case if the number was less than 2000. The powerful binary shipping sent 800 yuan to that account. Are you happy with the scammers? I am still very happy.
</Div>
</Div>
</Body>
</Html>
Ultimate EditionCopy codeThe Code is as follows: function highlightWord (node, word ){
// Iterate into this nodes childNodes
If (node. hasChildNodes ){
Var hi_cn;
For (hi_cn = 0; hi_cn <node. childNodes. length; hi_cn ++ ){
HighlightWord (node. childNodes [hi_cn], word );
}
}
// And do this node itself
If (node. nodeType = 3) {// text node
TempNodeVal = node. nodeValue. toLowerCase ();
TempWordVal = word. toLowerCase ();
If (tempNodeVal. indexOf (tempWordVal )! =-1 ){
Pn = node. parentNode;
If (pn. className! = "Highlight "){
// Word has not already been highlighted!
Nv = node. nodeValue;
Ni = tempNodeVal. indexOf (tempWordVal );
// Create a load of replacement nodes
Before = document. createTextNode (nv. substr (0, ni ));
DocWordVal = nv. substr (ni, word. length );
After = document. createTextNode (nv. substr (ni + word. length ));
Hiwordtext = document. createTextNode (docWordVal );
Hiword = document. createElement ("span ");
Hiword. className = "highlight ";
Hiword. appendChild (hiwordtext );
Pn. insertBefore (before, node );
Pn. insertBefore (hiword, node );
Pn. insertBefore (after, node );
Pn. removeChild (node );
}
}
}
}
// Highlight keywords Based on Tag names
Function SearchHighlightTag (node, key ){
If (! Document. createElement) return;
If (key. length = 0) return false;
Var array = new Array ();
Array = key. split ("");
Var element = document. getElementsByTagName (node );
For (var I = 0; I <array. length; I ++ ){
For (var j = 0; j <element. length; j ++ ){
HighlightWord (element [j], array [I]);
}
}
}
// Highlight keywords by ID
Function SearchHighlightID (node, key ){
If (! Document. createElement) return;
If (key. length = 0) return false;
Var array = new Array ();
Array = key. split ("");
Var element = document. getElementById (node );
For (var I = 0; I <array. length; I ++ ){
For (var j = 0; j <element. length; j ++ ){
HighlightWord (element, array [I]);
}
}
}