shawl.qiu javascript dom 关键词高亮类 v1.0_关键词高亮操作dom元素-优快云博客

本文链接：https://blog.youkuaiyun.com/btbtd/article/details/1471836

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.youkuaiyun.com/btbtd/archive/2006/11/12/1380221.aspx

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

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

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

shawl.qiu
2007-01-01
http://blog.youkuaiyun.com/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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shawl.qiu template</title>
<script type="text/javascript">
//<![CDATA[
onload=function(){
var keyword=new keywords();
keyword.body=document.body; // 要高亮显示关键词的 HTML 元素
keyword.flag='keyword|纸伞|她|雨巷|儿女情|独自|芬芳|忧愁'; // 传递要匹配的关键词, 使用正则匹配.
keyword.func=iLink; // 自定义链接函数, 可选, 参数为 yourfunc(sMatch, sBgCor, sFgCor);
keyword.go(); // 执行本程序
keyword=null;
}
function iLink(sMatch, sBgCor, sFgCor){
return '<a href="http://127.0.0.1:83/search.asp?sb=gl&key='+sMatch+'&fm=y&sc=desc&sct=stt">'+
''+sMatch+'</a>';
}
/*-----------------------------------------------------------------------------------*/
* shawl.qiu javascript dom 关键词高亮类 v1.0
/*-----------------------------------------------------------------------------------*/
//---------------------------------begin class keywords()-------------------------------//
function keywords(){ // shawl.qiu code
//------------------------------------begin public variable
//---------------begin about
this.auSubject='shawl.qiu javascript dom 关键词高亮类';
this.auVersion='1.0';
this.au='shawl.qiu';
this.auEmail='shawl.qiu@gmail.com';
this.auBlog='http://blog.youkuaiyun.com/btbtd';
this.auCreateDate='2006-12-31';
//---------------end about
this.body=document.body;
this.flag='';
this.func='';
this.iFlag1='@@';
this.iFlag2='##';
//------------------------------------end public variable
//------------------------------------begin public method
this.go=function(){
fGetWord(tl.body);
};
//------------------------------------end public method
//------------------------------------begin private variable
var tl=this;
var tlTemp='';
//------------------------------------end private variable
//------------------------------------begin private method
function fGetWord(oEle){
for(var i=0, j=oEle.childNodes.length; i<j; i++){
var oTemp=oEle.childNodes[i];
if(oTemp.nodeType==1){
arguments.callee(oTemp);
} else if (oTemp.nodeType==3){
var oRe=new RegExp(tl.flag,'gi');
if(oRe.test(oTemp.data)){
var sTemp=oTemp.data;
sTemp=sTemp.replace(oRe,function(sMatch){
if(tlTemp.indexOf(tl.iFlag1+sMatch+tl.iFlag1+tl.iFlag2)==-1){
var sBgCor=fRndCor(10, 20);
var sFgCor=fRndCor(230, 255);
tlTemp+=tl.iFlag1+sMatch+tl.iFlag1+tl.iFlag2+sBgCor+tl.iFlag2+sFgCor;
return fReturnStr(oTemp, sMatch, sBgCor, sFgCor);
} else {
var sBgCor=sFgCor='';
var iRe=new RegExp(tl.iFlag1+'('+sMatch+')'+tl.iFlag1+tl.iFlag2+'(.*?)'+
tl.iFlag2+'(.*?)('+tl.iFlag1+'|'+tl.iFlag2+'|$)','i');
tlTemp.replace(iRe, function($0,$1,$2,$3){
sBgCor=$2;sFgCor=$3;
});
return fReturnStr(oTemp, sMatch, sBgCor, sFgCor);
}// end if 3
});
if(typeof sTemp!='undefined'){
if(sTemp=='')break;
var oSpan=document.createElement('span');
oSpan.innerHTML=sTemp;
oTemp.parentNode.replaceChild(oSpan, oTemp);
oSpan=null;
} // end if 3
} // end if 2
oRe=null;
} // end if 1
} // end for
} // end function fGetWord(oEle)
function fReturnStr(oNode, sMatch, sBgCor, sFgCor){
if(tl.func==''||oNode.parentNode.nodeName=='A'){
return ''+
sMatch+'';
} else {
return tl.func(sMatch, sBgCor, sFgCor);
}
} // end function fReturnStr(oNode, sMatch, sBgCor, sFgCor)
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=fStrPadStr(r, r, 2);
var g=fRandomBy(under, over).toString(16);
g=fStrPadStr(g, g, 2);
var b=fRandomBy(under, over).toString(16);
b=fStrPadStr(b, b, 2);
//defaultStatus=r+' '+g+' '+b
return '#'+(r+g+b).toUpperCase()+';';
} // shawl.qiu code
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 code
function fStrPadStr(sSrc, sPad, nLen){
if(!sSrc)return false;
if(!sPad)sPad='0';
if(!nLen)nLen=2;
sSrc+='';
if(sSrc.length>=nLen)return sSrc;
sPad=new Array(nLen+1).join(sPad);
var re=new RegExp('.*(.{'+(nLen)+'})$');
return (sPad+sSrc).replace(re,'$1');
}
//------------------------------------end private method
} // shawl.qiu code
//---------------------------------end class keywords()---------------------------------//
//]]>
</script>
</head>
<body>
keyword
<div class="at_main" id="at_main">CITE:<cite><div class=u_cite>戴望舒写女孩
雨巷
撑着油纸伞，独自
彷徨在悠长、悠长
又寂寥的雨巷，
我希望逢着
一个丁香一样地
结着愁怨的姑娘。
她是有
丁香一样的颜色，
丁香一样的芬芳，
丁香一样的忧愁，
在雨中哀怨，
哀怨又彷徨；
她彷徨在这寂寥的雨巷，
撑着油纸伞
像我一样，
像我一样地
默默踟躇着
冷漠、凄清，又惆怅。
她默默地走近，
走近，又投出
叹息一般的眼光
她飘过
像梦一般地，
像梦一般地凄婉迷茫。
像梦中飘过
一枝丁香地，
我身旁飘过这个女郎；
她默默地远了，远了，
到了颓圮的篱墙，
走尽这雨巷。
在雨的哀曲里，
消了她的颜色，
散了<a href="/">她</a>的芬芳，
消散了，甚至她的
叹息般的眼光
丁香般的惆怅。
撑着油纸伞，独自
彷徨在悠长、悠长
又寂寥的雨巷，
我希望飘过
一个丁香一样地
结着愁怨的姑娘。</div></cite></div>
<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>
</body>
</html>