本章节分享一段代码实例,它实现了使用javascript将搜索关键字设置为高亮效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <script type="text/javascript"> function fHl(o, flag, rndColor, url){ var bgCor=fgCor=''; if(rndColor){ bgCor=fRndCor(10, 20); fgCor=fRndCor(230, 255); } else { bgCor='#F0F'; 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_); } } } 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+ '$1"'+style+'>$1</a>'); //这里是给关键字加链接,红色的$1是指上面链接地址后的具体参数。 } else { str=text.replace(re, '<span '+style+'>$1</span>'); //不加链接时显示 } o.innerHTML=str; return o; } 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); 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; } } function padNum(str, num, len){ var temp='' for(var i=0; i<len;temp+=num, i++); return temp=(temp+=str).substr(temp.length-len); } } } window.onload = function () { fHl(document.body, '犀牛前端部落'); } </script> </head> <body> 犀牛前端部落欢迎您,本站的url地址是www.pipipi.net </body> </html>
javascript搜索关键字高亮效果,这样的场景在实际项目中还是用的比较多的,关于javascript搜索关键字高亮效果就介绍到这了。
javascript搜索关键字高亮效果属于前端实例代码,有关更多实例代码大家可以查看。
本文地址: http://www.zzsi.net/code/web/98545.html
本站部分资源来源与网络,仅供学习参考使用,请勿商用,如侵犯了您的权益,请联系我们删除。
上一篇: Nodejs之http的表单提交
下一篇: onmouseleave事件详解