shawl.qiu javascript dom 关键词高亮类 v1.0

说明:
这个 javascript 类应用于页面搜索上, 主要为高亮显示搜索到的关键词.

下载原格式:
http://files.myopera.com/btbtd/javascript/function/keywords_v1.0.txt.7z

功能:
* 支持自定义高亮显示区域
* 支持自定义关键词链接 / 可选项
* 支持多关键词显示, 使用正则模式匹配关键词
* 支持每一关键词显示为不同的背景色和文字颜色

其实前段时段也写过一个类似的 javascript 函数,
这个: 使用 javascript HTML DOM 高亮显示页面特定字词 By shawl.qiu
链接: http://blog.csdn.net/btbtd/archive/2006/11/12/1380221.aspx

不过从功能上来说有两个不足处:
1. 相同的关键词可能显示不同的颜色, 这个问题非常不好.
2. 自定义关键词链接功能很弱

这次重写的这个关键词高亮类解决了上述的两个问题.

目录:
1. shawl.qiu javascript dom 关键词高亮类 v1.0 源码及演示

shawl.qiu
2007-01-01
http://blog.csdn.net/btbtd

1. shawl.qiu javascript dom 关键词高亮类 v1.0 源码及演示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml">
3

4

<head>
5

<title>shawl.qiu template</title>
7

//<![CDATA[
9

onload=function(){
10

var keyword=new keywords();
11

keyword.body=document.body; // 要高亮显示关键词的 HTML 元素
12

keyword.flag='keyword|纸伞|她|雨巷|儿女情|独自|芬芳|忧愁'; // 传递要匹配的关键词, 使用正则匹配.
13

keyword.func=iLink; // 自定义链接函数, 可选, 参数为 yourfunc(sMatch, sBgCor, sFgCor);
14

keyword.go(); // 执行本程序
15

keyword=null;
16

}
17

function iLink(sMatch, sBgCor, sFgCor){
18

return '<a href="http://127.0.0.1:83/search.asp?sb=gl&key='+sMatch+'&fm=y&sc=desc&sct=stt">'+
19

''+sMatch+'</a>';
20

}
21

/*-----------------------------------------------------------------------------------*\
22

* shawl.qiu javascript dom 关键词高亮类 v1.0
23

\*-----------------------------------------------------------------------------------*/
24

//---------------------------------begin class keywords()-------------------------------//
25

function keywords(){ // shawl.qiu code
26

//------------------------------------begin public variable
27

//---------------begin about
28

this.auSubject='shawl.qiu javascript dom 关键词高亮类';
29

this.auVersion='1.0';
30

this.au='shawl.qiu';
31

this.auEmail='shawl.qiu@gmail.com';
32

this.auBlog='http://blog.csdn.net/btbtd';
33

this.auCreateDate='2006-12-31';
34

//---------------end about
35

this.body=document.body;
36

this.flag='';
37

this.func='';
38

this.iFlag1='@@';
39

this.iFlag2='##';
40

//------------------------------------end public variable
41

//------------------------------------begin public method
42

this.go=function(){
43

fGetWord(tl.body);
44

};
45

//------------------------------------end public method
46

//------------------------------------begin private variable
47

var tl=this;
48

var tlTemp='';
49

//------------------------------------end private variable
50

//------------------------------------begin private method
51

function fGetWord(oEle){
52

for(var i=0, j=oEle.childNodes.length; i<j; i++){
53

var oTemp=oEle.childNodes[i];
54

if(oTemp.nodeType==1){
55

arguments.callee(oTemp);
56

} else if (oTemp.nodeType==3){
57

var oRe=new RegExp(tl.flag,'gi');
58

if(oRe.test(oTemp.data)){
59

var sTemp=oTemp.data;
60

sTemp=sTemp.replace(oRe,function(sMatch){
61

if(tlTemp.indexOf(tl.iFlag1+sMatch+tl.iFlag1+tl.iFlag2)==-1){
62

var sBgCor=fRndCor(10, 20);
63

var sFgCor=fRndCor(230, 255);
64

tlTemp+=tl.iFlag1+sMatch+tl.iFlag1+tl.iFlag2+sBgCor+tl.iFlag2+sFgCor;
65

return fReturnStr(oTemp, sMatch, sBgCor, sFgCor);
66

} else {
67

var sBgCor=sFgCor='';
68

var iRe=new RegExp(tl.iFlag1+'('+sMatch+')'+tl.iFlag1+tl.iFlag2+'(.*?)'+
69

tl.iFlag2+'(.*?)('+tl.iFlag1+'|'+tl.iFlag2+'|$)','i');
70

tlTemp.replace(iRe, function($0,$1,$2,$3){
71

sBgCor=$2;sFgCor=$3;
72

});
73

return fReturnStr(oTemp, sMatch, sBgCor, sFgCor);
74

}// end if 3
75

});
76

if(typeof sTemp!='undefined'){
77

if(sTemp=='')break;
78

var oSpan=document.createElement('span');
79

oSpan.innerHTML=sTemp;
80

oTemp.parentNode.replaceChild(oSpan, oTemp);
81

oSpan=null;
82

} // end if 3
83

} // end if 2
84

oRe=null;
85

} // end if 1
86

} // end for
87

} // end function fGetWord(oEle)
88

function fReturnStr(oNode, sMatch, sBgCor, sFgCor){
89

if(tl.func==''||oNode.parentNode.nodeName=='A'){
90

return ''+
91

sMatch+'';
92

} else {
93

return tl.func(sMatch, sBgCor, sFgCor);
94

}
95

} // end function fReturnStr(oNode, sMatch, sBgCor, sFgCor)
96

function fRndCor(under, over){
97

if(arguments.length==1){
98

var over=under;
99

under=0;
100

}else if(arguments.length==0){
101

var under=0;
102

var over=255;
103

}
104

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

r=fStrPadStr(r, r, 2);
106

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

g=fStrPadStr(g, g, 2);
108

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

b=fStrPadStr(b, b, 2);
110

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

return '#'+(r+g+b).toUpperCase()+';';
112

} // shawl.qiu code
113

function fRandomBy(under, over){
114

switch(arguments.length){
115

case 1: return parseInt(Math.random()*under+1);
116

case 2: return parseInt(Math.random()*(over-under+1) + under);
117

default: return 0;
118

}
119

} // shawl.qiu code
120

function fStrPadStr(sSrc, sPad, nLen){
121

if(!sSrc)return false;
122

if(!sPad)sPad='0';
123

if(!nLen)nLen=2;
124

sSrc+='';
125

if(sSrc.length>=nLen)return sSrc;
126

sPad=new Array(nLen+1).join(sPad);
127

var re=new RegExp('.*(.{'+(nLen)+'})$');
128

return (sPad+sSrc).replace(re,'$1');
129

}
130

//------------------------------------end private method
131

} // shawl.qiu code
132

//---------------------------------end class keywords()---------------------------------//
133

//]]>
134

</script>
135

</head>
136

<body>
137

keyword
138

<div class="at_main" id="at_main">CITE:<cite><div class=u_cite>戴望舒写女孩 
139

140

雨巷  
141

撑着油纸伞，独自  
142

彷徨在悠长、悠长  
143

又寂寥的雨巷，  
144

我希望逢着  
145

一个丁香一样地  
146

结着愁怨的姑娘。  
147

她是有  
148

丁香一样的颜色，  
149

丁香一样的芬芳，  
150

丁香一样的忧愁，  
151

在雨中哀怨，  
152

哀怨又彷徨；  
153

她彷徨在这寂寥的雨巷，  
154

撑着油纸伞  
155

像我一样，  
156

像我一样地  
157

默默踟躇着  
158

冷漠、凄清，又惆怅。  
159

她默默地走近，  
160

走近，又投出  
161

叹息一般的眼光  
162

她飘过  
163

像梦一般地，  
164

像梦一般地凄婉迷茫。  
165

像梦中飘过  
166

一枝丁香地，  
167

我身旁飘过这个女郎；  
168

她默默地远了，远了，  
169

到了颓圮的篱墙，  
170

走尽这雨巷。  
171

在雨的哀曲里，  
172

消了她的颜色，  
173

散了<a href="/">她</a>的芬芳，  
174

消散了，甚至她的  
175

叹息般的眼光  
176

丁香般的惆怅。  
177

撑着油纸伞，独自  
178

彷徨在悠长、悠长  
179

又寂寥的雨巷，  
180

我希望飘过  
181

一个丁香一样地  
182

结着愁怨的姑娘。</div></cite></div>
183

<a href="article.asp?classid=14&nclassid=178&articleid=12830#anchor">戴望舒写女孩</a> <a href="article.asp?classid=14&nclassid=178&articleid=12819#anchor">悲惨世界 - 第四部卜吕梅街的儿女情和圣德尼街的英雄血 - 第五卷　结尾不象开头 - 四　石头下面的一颗心</a> <a href="article.asp?classid=14&nclassid=178&articleid=12835#anchor">青玉案 元夕</a> <a href="article.asp?classid=14&nclassid=178&articleid=12855#anchor">“科学精神”语义分析</a> <a href="article.asp?classid=14&nclassid=178&articleid=3053#anchor">再别康桥－－徐志摩</a> <a href="article.asp?classid=14&nclassid=178&articleid=12862#anchor">学术论文格式</a> <a href="article.asp?classid=14&nclassid=178&articleid=12836#anchor">一棵开花的树</a> <a href="article.asp?classid=14&nclassid=178&articleid=12840#anchor">书信写作格式</a> <a href="article.asp?classid=14&nclassid=178&articleid=12818#anchor">悲惨世界 - 第四部卜吕梅街的儿女情和圣德尼街的英雄血 - 第十二卷　科林斯 - 六　等　待</a> <a href="article.asp?classid=14&nclassid=178&articleid=12834#anchor">卿云歌</a>
184

</body>
185

</html>
186

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/btbtd/archive/2007/01/01/1471836.aspx

posted @ 2009-08-11 14:50 瞭望者阅读(232) 评论(0) 收藏举报

刷新页面返回顶部

shawl.qiu javascript dom 关键词高亮类 v1.0

公告