Use JavaScript HTML Dom to highlight specific words on the page by shawl. Qiu
Note:
This is mainly used in the search results to highlight related words.
This function was mainly written a few days ago in the csdn community JS version of a netizen had such a demand, when the grass wrote a simple function to highlight the page specific words.
However, it was found that this function was very good, so I just wanted to improve it later.
The final result is okay. The only drawback is that the same word may have multiple colors when highlighted.
In fact, it is not difficult to show only one color for a word, but it requires more code to judge, so this function is not perfect.
Description of parameters of function fhl (O, flag, rndcolor, URL:
Linenum
- /*----------------------------------------*/
- * Use JavaScript HTML Dom to highlight a specific word on the page by shawl. Qiu
- * Parameter description:
- * O: object to be highlighted.
- * Flag: a string of words or words to be highlighted. Multiple words are separated by vertical bars (|.
- * Rndcolor: Boolean value. indicates whether the background color and text color of the text are displayed randomly. True indicates random display.
- * URL: URI, whether to add links to highlighted words.
- /*----------------------------------------*/
Shawl. Qiu
2006-11-12
Http://blog.csdn.net/btbtd
Function fhl (O, flag, rndcolor, URL) source code and usage Demonstration:
Linenum
- <! 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">
- <! -- Dw6 -->
- <Head>
- <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
- <Title> shawl. Qiu template </title>
- <SCRIPT type = "text/JavaScript">
- // <! [CDATA [
- Onload = function (){
- Fhl (document. Body, 'paper umbrella | her ');
- Fhl (document. Body, 'clove | yuxiang', true );
- Fhl (document. Body, 'hope | grievance ', false ,'/');
- Fhl (document. getelementbyid ('at _ main'), 'alone | drifting | long', true ,'/');
- /* Fhl (document. Body, 'paper umbrella ');
- Fhl (document. Body, 'hers ', false ,'/');
- Fhl (document. Body, 'clove ', true ,'/');
- Fhl (document. Body, 'yuxiang', true ,'/');
- Fhl (document. Body, 'expect', false );
- Fhl (document. Body, 'dnuse', true );*/
- /* Fhl (document. Body, 'clove ', 'Blue', 'White ','/');
- Fhl (document. Body, 'rain Lane ', 'Gray', 'White ','/');
- Fhl (document. Body, 'id', 'white', 'red ');
- Fhl (document. Body, 'length', 'white', 'red ');
- Fhl (document. Body, 'floppy ');*/
- }
- /*----------------------------------------*/
- * Use JavaScript HTML Dom to highlight a specific word on the page by shawl. Qiu
- * Parameter description:
- * O: object to be highlighted.
- * Flag: a string of words or words to be highlighted. Multiple words are separated by vertical bars (|.
- * Rndcolor: Boolean value. indicates whether the background color and text color of the text are displayed randomly. True indicates random display.
- * URL: URI, whether to add links to highlighted words.
- /*----------------------------------------*/
- // -------- Begin function fhl (O, flag, rndcolor, URL )------------------//
- Function fhl (O, flag, rndcolor, URL ){
- VaR bgcor = fgcor = '';
- If (rndcolor ){
- Bgcor = frndcor (10, 20 );
- Fgcor = fig (230,255 );
- } Else {
- Bgcor = 'yellow ';
- 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 _);
- }
- } // Shawl. Qiu script
- }
- //------------------------------------------------
- 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> ');
- } Else {
- STR = text. Replace (Re, '<span' + style + '> $1 </span> ');
- }
- O. innerhtml = STR;
- Return O;
- } // Shawl. Qiu script
- //------------------------------------------------
- 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;
- }
- } // Shawl. Qiu script
- Function padnum (STR, num, Len ){
- VaR temp =''
- For (VAR I = 0; I <Len; temp + = num, I ++ );
- Return temp = (temp + = Str). substr (temp. Length-len );
- } // Shawl. Qiu script
- }
- } // Shawl. Qiu script
- // -------- End function fhl (O, flag, rndcolor, URL )--------------------//
- //]>
- </SCRIPT>
- </Head>
- <Body>
- <Div class = "at_main" id = "at_main"> <p/> <B> cite: </B> <cite> <Div class = u_cite> Dai Wangshu writes a girl <br/>
- <Br/>
- & Nbsp; Yuxiang & nbsp; <br/>
- Holding a paper umbrella, independent & nbsp; <br/>
- Long and long <br/>
- Youmin Yu Xiang, & nbsp; <br/>
- I hope to meet & nbsp; <br/>
- A clove is the same & nbsp; <br/>
- Sad girl. & Nbsp; <br/>
- She has & nbsp; <br/>
- The same color as clove, & nbsp; <br/>
- The same fragrance as clove, & nbsp; <br/>
- Sorrow like clove, & nbsp; <br/>
- Grief in the rain, & nbsp; <br/>
- Sorrow and sorrow; & nbsp; <br/>
- She is wandering in the lonely Rain Lane, & nbsp; <br/>
- Carrying a Paper Umbrella & nbsp; <br/>
- Like me, & nbsp; <br/>
- Like Me & nbsp; <br/>
- Keep running & nbsp; <br/>
- Indifference, clear, and melancholy. & Nbsp; <br/>
- She approached silently, & nbsp; <br/>
- Approaching, and output & nbsp; <br/>
- Sighing eyes & nbsp; <br/>
- She floated over & nbsp; <br/>
- Like a dream, & nbsp; <br/>
- It is as miserable and confused as a dream. & Nbsp; <br/>
- Wandering like a dream & nbsp; <br/>
- A clove location, & nbsp; <br/>
- This girl floated beside me; & nbsp; <br/>
- She was far away, far away, & nbsp; <br/>
- Go to the firewall of zookeeper, & nbsp; <br/>
- Go through the Rain Lane. & Nbsp; <br/>
- & Nbsp; <br/>
- Her color is removed, & nbsp; <br/>
- Dissembling the fragrance of <a href = "/"> her </a>, & nbsp; <br/>
- Even her & nbsp; <br/>
- Sighing eyes & nbsp; <br/>
- Clove-like melancholy. & Nbsp; <br/>
- Holding a paper umbrella, independent & nbsp; <br/>
- Long and long <br/>
- Youmin Yu Xiang, & nbsp; <br/>
- I want to float & nbsp; <br/>
- A clove is the same & nbsp; <br/>
- Sad girl. </Div> </CITE> </div>
- <SPAN class = "left160px"> <a href = "article. asp? Classid = 14 & nclassid = 178 & ArticleID = 12830 # anchor "> Dai Wangshu writes girls </a> <br/> <a href =" article. asp? Classid = 14 & nclassid = 178 & ArticleID = 12819 # anchor "> miserable world-Part 4: the daughter and daughter of blumei Street and the blood of the hero of sunny street-the fifth volume does not end with a heart below the start-four stones </a> <br/> <a href = "article. asp? Classid = 14 & nclassid = 178 & ArticleID = 12835 # anchor "> qingyu case & nbsp; yuanxi </a> <br/> <a href =" article. asp? Classid = 14 & nclassid = 178 & ArticleID = 12855 # anchor ">" Scientific Spirit "Semantic Analysis </a> <br/> <a href =" article. asp? Classid = 14 & nclassid = 178 & ArticleID = 3053 # anchor "> goodbye to Kangqiao -- Xu Zhimo </a> <br/> <a href =" article. asp? Classid = 14 & nclassid = 178 & ArticleID = 12862 # anchor "> academic paper format </a> <br/> <a href =" article. asp? Classid = 14 & nclassid = 178 & ArticleID = 12836 # anchor "> a blooming tree </a> <br/> <a href =" article. asp? Classid = 14 & nclassid = 178 & ArticleID = 12840 # anchor "> letter writing format </a> <br/> <a href =" article. asp? Classid = 14 & nclassid = 178 & ArticleID = 12818 # anchor "> miserable world-Part 4: the daughter of blumei Street and the blood of the hero of San duni street-12th vol. Collins-6 waiting </> <br/> <a href = "article. asp? Classid = 14 & nclassid = 178 & ArticleID = 12834 # anchor "> yunge </a> </span>
- </Body>
- </Html>
