JavaScript搜索关键字高亮的实现

01

<script type=

"text/javascript"

>

02

//<![CDATA[

03

//--------begin function fHl(o,flag,rndColor,url)------------------//

04

function

fHl(o,flag,rndColor,url){

05

/// <summary>

06

/// 使用 javascript HTML DOM 高亮显示页面特定字词.

07

/// 实例:

08

/// fHl(document.body,'纸伞|她');

09

/// 这里的body是指高亮body里面的内容。

10

/// fHl(document.body,'希望|愁怨',false,'/');

11

/// fHl(document.getElementById('at_main'),'独自|飘过|悠长',true,'search.asp?keyword=');

12

/// 这里的'at_main'是指高亮id='at_main'的div里面的内容。search.asp?keyword=指给关键字加的链接地址，

13

/// 我这里加了一个参数，在后面要用到。可以是任意的地址。   

14

/// </summary>

15

/// <param name="o" type="Object">

16

/// 对象,要进行高亮显示的对象.

17

/// </param>

18

/// <param name="flag" type="String">

19

/// 字符串,要进行高亮的词或多个词,使用 竖杠(|) 分隔多个词 .

20

/// </param>

21

/// <param name="rndColor" type="Boolean">

22

/// 布尔值,是否随机显示文字背景色与文字颜色,true 表示随机显示.

23

/// </param>

24

/// <param name="url" type="String">

25

/// URI,是否对高亮的词添加链接.

26

/// </param>   

27

/// <return></return>

28

var

bgCor=fgCor=

''

;

29

if

(rndColor){

30

bgCor=fRndCor(10,20);

31

fgCor=fRndCor(230,255);

32

}

else

{

33

bgCor=

'#F0F'

;

34

fgCor=

'black'

;

35

}

36

var

re=

new

RegExp(flag,

'i'

);

37

for

(

var

i=0; i<o.childNodes.length; i++){

38

var

o_=o.childNodes[i];

39

var

o_p=o_.parentNode;

40

if

(o_.nodeType==1) {

41

fHl(o_,flag,rndColor,url);

42

}

else

if

(o_.nodeType==3) {

43

if

(!(o_p.nodeName==

'A'

)){

44

if

(o_.data.search(re)==-1)

continue

;

45

var

temp=fEleA(o_.data,flag);

46

o_p.replaceChild(temp,o_);

47

}

48

}

49

}

50

//------------------------------------------------

51

function

fEleA(text,flag){

52

var

style=

' style=" width:auto !important; margin:0px !important; padding:0px !important; border:0px !important; outline:0px !important; float:none !important; vertical-align:baseline !important; position:static !important; left:auto !important; top:auto !important; right:auto !important; bottom:auto !important; height:auto !important; line-height:1.1em !important; min-height:inherit !important; background:none !important;">+bgCor+

';color:'

+fgCor+

';" '

53

var

o=document.createElement(

'span'

);

54

var

str=

''

;

55

var

re=

new

RegExp(

'('

+flag+

')'

,

'gi'

);

56

if

(url){

57

str=text.replace(re,

'<a href="'

+url+

58

'$1"'

+style+

'>$1</a>'

);

//这里是给关键字加链接，红色的$1是指上面链接地址后的具体参数。

59

}

else

{

60

str=text.replace(re,

'<span '

+style+

'>$1</span>'

);

//不加链接时显示

61

}

62

o.innerHTML=str;

63

return

o;

64

}

65

//------------------------------------------------

66

function

fRndCor(under,over){

67

if

(arguments.length==1){

68

var

over=under;

69

under=0;

70

}

else

if

(arguments.length==0){

71

var

under=0;

72

var

over=255;

73

}

74

var

r=fRandomBy(under,over).toString(16);

75

r=padNum(r,r,2);

76

var

g=fRandomBy(under,over).toString(16);

77

g=padNum(g,g,2);

78

var

b=fRandomBy(under,over).toString(16);

79

b=padNum(b,b,2);

80

//defaultStatus=r+' '+g+' '+b

81

return

'#'

+r+g+b;

82

function

fRandomBy(under,over){

83

switch

(arguments.length){

84

case

1:

return

parseInt(Math.random()*under+1);

85

case

2:

return

parseInt(Math.random()*(over-under+1) + under);

86

default

:

return

0;

87

}

88

}

89

function

padNum(str,num,len){

90

var

temp=

''

91

for

(

var

i=0; i<len;temp+=num,i++);

92

return

temp=(temp+=str).substr(temp.length-len);

93

}

94

}

95

}

96

//--------end function fHl(o,flag,rndColor,url)--------------------//

97

//]]>

98

</script>

1

<script type=

"text/javascript"

>

2

fHl(document.body,

'高亮'

); 

//对页面body的区域中的“高亮”文字背景着色

3

</script>