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

本文链接：https://blog.csdn.net/btbtd/article/details/1380221

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

说明:
这个主要应用于搜索结果上, 高亮显示搜索到的相关词句.

写这个函数主要是前几天在CSDN社区JS版一个网友有这么一个需求, 当时草草写了一个简单点的函数实现高亮显示页面特定词句.

不过后来发现这个功能很不错, 就找时间完善了一下.
最后效果还行, 唯一不足的地方在于高亮显示的时候, 同一个词可能会有多种颜色.
其实要一个词只显示一个颜色并不难, 不过那要耗费更多的代码去判断, 因此也就不完善该功能呢.

函数 fHl(o, flag, rndColor, url) 参数说明:

linenum
/*----------------------------------------*/
* 使用 javascript HTML DOM 高亮显示页面特定字词 By shawl.qiu
* 参数说明:
* o: 对象, 要进行高亮显示的对象.
* flag: 字符串, 要进行高亮的词或多个词, 使用竖杠(|) 分隔多个词 .
* rndColor: 布尔值, 是否随机显示文字背景色与文字颜色, true 表示随机显示.
* url: URI, 是否对高亮的词添加链接.
/*----------------------------------------*/

shawl.qiu
2006-11-12
http://blog.csdn.net/btbtd

函数 fHl(o, flag, rndColor, url) 源码及使用演示:

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shawl.qiu template</title>
<script type="text/javascript">
//<![CDATA[
οnlοad=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)--------------------//
//]]>
</script>
</head>
<body>
<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>