<! DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>js keyword highlighting </title>
<script type= "Text/javascript" >
/*
* Parameter Description:
* Obj: object, the HTML tag node to be highlighted.
* Hlwords: String, to be highlighted by the keyword Word, using the vertical bar (|) or spaces to separate multiple words.
* bgcolor: Background color, the default 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);
The core method of performing a highlight tag
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</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;
}
}
Use bubble sort method to put long keywords in front
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>
<body>
<div id= "Waidiv" >
<input type= "text" id= "KeyWord"/>
<input type= "button" value= "Searching" onclick= "search ()"/><br/>
<br/>
<div id= "Contentdiv" >
Two goods friends play game was cheated 1200 pieces, after the alarm was told not enough 2000 no way to file. The powerful two goods sent another 800 pieces to that account. You say that liar is happy? I was very happy.
</div>
</div>
</body>
