How to highlight keywords in JavaScript search

The highlight function highlights the text in the specified area on the page, that is, the background color. This function is often used on the search results page.

The following provides a solution that is implemented using javascript.

First introduce the following javascript method in

<Script type = "text/javascript"> // <! [CDATA [// -------- begin function fHl (o, flag, rndColor, url) ---------------- // function fHl (o, flag, rndColor, url) {// <summary> /// use javascript html dom to highlight specific words on the page. /// instance: // fHl (document. body, 'paper umbrella | her '); // the body here refers to the content in the highlighted body. /// FHl (document. body, 'hope | sorrow ', false,'/'); // fHl (document. getElementById ('at _ main'), 'alone | float | long', true, 'search. asp? Keyword = '); // here, 'at _ main' refers to the content in the div with highlighted id = 'at _ main. Search. asp? Keyword = refers to the link address added to the keyword. // I add a parameter here, which will be used later. It can be any address. /// </Summary> /// <param name = "o" type = "Object"> // specifies the Object to be highlighted. /// </param> /// <param name = "flag" type = "String"> /// String, which contains the words or multiple words to be highlighted, use vertical bars (|) to separate multiple words. /// </param> /// <param name = "rndColor" type = "Boolean"> /// Boolean value: Specifies whether the background color and text color of the text are displayed randomly, true indicates 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) {bgC Or = 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 = "' + ur L + '$1 "' + style + '> $1 </a>'); // Add a link to the keyword, the red $1 refers to the specific parameter after the link above.} Else {str = text. replace (re, '<span' + style + '> $1 </span>'); // displayed when no link is added} 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 above fHl method is used for highlighting. The parameter meaning is written in the annotation.

Then, call the fHl method at the end of the page to specify the text highlight color for the specified area. For example:

<Script type = "text/javascript"> fHl (document. body, 'highlighting '); // color the highlighted text background in the area of the page body </script>