使用 javascript HTML DOM 高亮显示页面特定字词 By shawl.qiu 说明: 这个主要应用于搜索结果上, 高亮显示搜索到的相关词句. 写这个函数主要是前几天在CSDN社区JS版一个网友有这么一个需求.
说明:
这个主要应用于搜索结果上, 高亮显示搜索到的相关词句.
写这个函数主要是前几天在CSDN社区JS版一个网友有这么一个需求, 当时草草写了一个简单点的函数实现高亮显示页面特定词句.
不过后来发现这个功能很不错, 就找时间完善了一下.
最后效果还行, 唯一不足的地方在于高亮显示的时候, 同一个词可能会有多种颜色.
其实要一个词只显示一个颜色并不难, 不过那要耗费更多的代码去判断, 因此也就不完善该功能呢.
函数 fHl(o, flag, rndColor, url) 参数说明:
linenum
- /*----------------------------------------*\
- * 使用 javascript HTML DOM 高亮显示页面特定字词 By shawl.qiu
- * 参数说明:
- * o: 对象, 要进行高亮显示的对象.
- * flag: 字符串, 要进行高亮的词或多个词, 使用 竖杠(|) 分隔多个词 .
- * rndColor: 布尔值, 是否随机显示文字背景色与文字颜色, true 表示随机显示.
- * url: URI, 是否对高亮的词添加链接.
- \*----------------------------------------*/
shawl.qiu
函数 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">
- <!-- DW6 -->
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>shawl.qiu template</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, '<span '+style+'>$1</span>');
- }
- 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"><p/><b>CITE:</b><cite><div class=u_cite>戴望舒写女孩<br/>
- <br/>
- 雨 巷 <br/>
- 撑着油纸伞，独自 <br/>
- 彷徨在悠长、悠长 <br/>
- 又寂寥的雨巷， <br/>
- 我希望逢着 <br/>
- 一个丁香一样地 <br/>
- 结着愁怨的姑娘。 <br/>
- 她是有 <br/>
- 丁香一样的颜色， <br/>
- 丁香一样的芬芳， <br/>
- 丁香一样的忧愁， <br/>
- 在雨中哀怨， <br/>
- 哀怨又彷徨； <br/>
- 她彷徨在这寂寥的雨巷， <br/>
- 撑着油纸伞 <br/>
- 像我一样， <br/>
- 像我一样地 <br/>
- 默默踟躇着 <br/>
- 冷漠、凄清，又惆怅。 <br/>
- 她默默地走近， <br/>
- 走近，又投出 <br/>
- 叹息一般的眼光 <br/>
- 她飘过 <br/>
- 像梦一般地， <br/>
- 像梦一般地凄婉迷茫。 <br/>
- 像梦中飘过 <br/>
- 一枝丁香地， <br/>
- 我身旁飘过这个女郎； <br/>
- 她默默地远了，远了， <br/>
- 到了颓圮的篱墙， <br/>
- 走尽这雨巷。 <br/>
- 在雨的哀曲里， <br/>
- 消了她的颜色， <br/>
- 散了<a href="/">她</a>的芬芳， <br/>
- 消散了，甚至她的 <br/>
- 叹息般的眼光 <br/>
- 丁香般的惆怅。 <br/>
- 撑着油纸伞，独自 <br/>
- 彷徨在悠长、悠长 <br/>
- 又寂寥的雨巷， <br/>
- 我希望飘过 <br/>
- 一个丁香一样地 <br/>
- 结着愁怨的姑娘。</div></cite></div>
- <span class="left160px"><a href="article.asp?classid=14&nclassid=178&articleid=12830#anchor">戴望舒写女孩</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12819#anchor">悲惨世界 - 第四部 卜吕梅街的儿女情和圣德尼街的英雄血 - 第五卷 结尾不象开头 - 四 石头下面的一颗心</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12835#anchor">青玉案 元夕</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12855#anchor">“科学精神”语义分析</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=3053#anchor">再别康桥 －－徐志摩</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12862#anchor">学术论文格式</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12836#anchor">一棵开花的树</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12840#anchor">书信写作格式</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12818#anchor">悲惨世界 - 第四部 卜吕梅街的儿女情和圣德尼街的英雄血 - 第十二卷 科林斯 - 六 等 待</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12834#anchor">卿云歌</a></span>
- </body>
- </html>
京公网安备 11010802021500号