javascript搜索关键字高亮效果
分类：实例代码
本章节分享一段代码实例，它实现了使用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搜索关键字高亮效果属于前端实例代码，有关更多实例代码大家可以查看。