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

来源：互联网发布：华为sim卡网络解锁nck 编辑：程序博客网时间：2024/04/29 18:12

<!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=gb2312" />
<title>shawl.qiu template 使用 javascript HTML DOM 高亮显示页面特定字词</title>
<script type="text/javascript">
//<![CDATA[
 onload=function(){
 fHl(document.body, '纸伞|她');
 /* fHl(document.body, '丁香|雨巷', true);

 fHl(document.body, '希望|愁怨', false, '/');
 fHl(document.getElementById('at_main'), '独自|飘过|悠长', true, '/'); */

/* fHl(document.body, '纸伞');
 fHl(document.body, '她', false, '/');
 fHl(document.body, '丁香', true, '/');
 fHl(document.body, '雨巷', true, '/');

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

/* fHl(document.body, '丁香', 'blue', 'white', '/');
 fHl(document.body, '雨巷', 'gray', 'white', '/');
 fHl(document.body, '独自', 'white', 'red');
 fHl(document.body, '悠长', 'white', 'red');
 fHl(document.body, '飘过'); */
 }
 /*----------------------------------------*/
 * 使用 javascript HTML DOM 高亮显示页面特定字词 By shawl.qiu
 * 参数说明:
 * o: 对象, 要进行高亮显示的对象.
 * flag: 字符串, 要进行高亮的词或多个词, 使用竖杠(|) 分隔多个词 .
 * rndColor: 布尔值, 是否随机显示文字背景色与文字颜色, true 表示随机显示.
 * url: URI, 是否对高亮的词添加链接.
 /*----------------------------------------*/
 //--------begin function fHl(o, flag, rndColor, url)------------------//
 function fHl(o, flag, rndColor, url){
 var bgCor=fgCor='';
 if(rndColor){
 bgCor=fRndCor(10, 20);
 fgCor=fRndCor(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, '$1');
 }
 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)--------------------//

function go(str)
{
fHl(document.body, str);
}

//]]>
</script>
</head>
<body>
<input type="text" id="TString"><input type="button" value="search" onclick='go(document.getElementById("Tstring").value);'> 
<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>