JavaScript Implementation keyword highlighting function _ basics

Highlighting is the highlight of the specified text in the page, which is the background coloring. This feature is commonly used in search results pages.

Here is a solution for everyone, using JavaScript to implement.

First, introduce the following JavaScript method in

Copy Code code as follows:

<script type= "Text/javascript" >
<! [cdata[
--------begin function FHl (o, Flag, Rndcolor, URL)------------------//
function FHl (o, Flag, Rndcolor, URL) {
<summary>
Highlight page-specific words using the JavaScript HTML DOM.
Instance:
FHl (document.body, ' umbrella | She ');
The body here refers to the contents of the highlighted body.
FHl (document.body, ' hope | sorrow ', FALSE, '/');
FHl (document.getElementById (' At_main '), ' alone | floated | Long ', true, ' search.asp?keyword= ');
The ' At_main ' here refers to the contents of the div that highlights id= ' At_main '. Search.asp?keyword= refers to the link address of the keyword Plus,
I've added a parameter here that I want to use later. Can be an arbitrary address.
</summary>
<param name= "O" type= "Object" >
Object, the object to be highlighted.
</param>
<param name= "Flag" type= "String" >
A string that is used to highlight a word or multiple words, using a vertical bar (|) to separate multiple words.
</param>
<param name= "Rndcolor" type= "Boolean" >
Boolean value, whether the text background color and the text color are displayed randomly, and true indicates a random display.
</param>
<param name= "url" type= "String" >
URI, whether to add a link to the highlighted word.
</param>
<return></return>
var bgcor=fgcor= ';
if (Rndcolor) {
Bgcor=frndcor (10, 20);
Fgcor=frndcor (230, 255);
} else {
Bgcor= ' #F0F ';
Fgcor= ' black ';
}
var re=new RegExp (flag, ' I ');
for (var i=0; i<o.childnodes.length; i++) {
var o_=o.childnodes[i];
var O_p=o_.parentnode;
if (o_.nodetype==1) {
FHl (o_, flag, Rndcolor, URL);
else if (o_.nodetype==3) {
if (!) ( o_p.nodename== ' A ')) {
if (O_.data.search (re) ==-1) continue;
var Temp=felea (o_.data, flag);
O_p.replacechild (temp, o_);
}
}
}
//------------------------------------------------
function Felea (text, flag) {
var style= ' style= ' background-color: ' +bgcor+ '; color: ' +fgcor+ '; '
var o=document.createelement (' span ');
var str= ';
var re=new RegExp (' (' +flag+ ') ', ' GI ');
if (URL) {
Str=text.replace (Re, ' <a href= ' +url+
' $ ' +style+ ' >$1</a> '); Here is a link to the keyword, red is the link above the address of the specific parameters.
} else {
Str=text.replace (Re, ' <span ' +style+ ' >$1</span> '); Show without link
}
O.INNERHTML=STR;
return o;
}
//------------------------------------------------
function Frndcor (under, over) {
if (arguments.length==1) {
var Over=under;
under=0;
}else if (arguments.length==0) {
var under=0;
var over=255;
}
var R=frandomby (under, over). toString (16);
R=padnum (R, R, 2);
var G=frandomby (under, over). toString (16);
G=padnum (g, G, 2);
var B=frandomby (under, over). toString (16);
B=padnum (b, B, 2);
defaultstatus=r+ ' +g+ ' +b
Return ' # ' +r+g+b;
function Frandomby (under, over) {
Switch (arguments.length) {
Case 1:return parseint (Math.random () *under+1);
Case 2:return parseint (Math.random () * (over-under+1) + under);
Default:return 0;
}
}
function padnum (str, num, len) {
var temp= '
for (var i=0; i<len;temp+=num, i++);
Return temp= (TEMP+=STR). substr (Temp.length-len);
}
}
}
--------End Function FHl (o, Flag, Rndcolor, URL)--------------------//
]]>
</script>

The Fhl method above is used to implement the highlight, and the meaning of the parameter is written in the annotation.

The Fhl method is then called at the end of the page to specify text highlighting for the specified range, for example:

Copy Code code as follows:

<script type= "Text/javascript" >
FHl (document.body, ' highlight '); Color the highlight text background in the area of the body of the page
</script>

How is it, very simple?