以前实现磨盘文件名里的关键词高亮而找的代码,查找并匹配,使特定内容变红显示,具体效果可以查看笑忘书网页代码收藏馆

测试了几个,这个还算不错,代码比较少,实现起来比较方便。代码转自脚本之家

<div id="demo"> 
我的磨(wodemo.com) 简洁绿色自由的移动手机网站。支持各种格式文件上传,提供电子书在线阅读文件在线解压查看下载,通过撰文功能,你可以随意添加HTML代码,多个图片音频附件,轻松实现图文并茂,方便编写教程发表文章分享内容等等。首页和文件页支持CSS装扮美化,首页可添加html和JavaScript,打造更符合自己喜好的页面。
</div>
<script> 
function SearchHighlight(keyword)
{
var pucl = document.getElementById("demo");
//查找关键词所在范围内
if("" == keyword) return;
var temp=pucl.innerHTML;
var htmlReg = new RegExp("\<.*?\>","i");
var arrA = new Array();
//替换HTML标签
for(var i=0;true;i++)
{
var m=htmlReg.exec(temp);
if(m)
{
arrA[i]=m;
}
else
{
break;
}
temp=temp.replace(m,"{[("+i+")]}");
}
words = unescape(keyword.replace(/\+/g,' ')).split(/\s+/);
//替换关键字
for (w=0;w<words.length;w++)
{
var r = new RegExp("("+words[w].replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&")+")","ig");
temp = temp.replace(r,"<b style='color:red;'>$1</b>");
//上面的style=' '定义关键字的样式
}
//恢复HTML标签
for(var i=0;i<arrA.length;i++)
{
temp=temp.replace("{[("+i+")]}",arrA[i]);
}
pucl.innerHTML=temp;
}
SearchHighlight("我的磨 wodemo CSS 撰文");
//要定义的关键字,用空格隔开
</script>

先确定关键词的所在范围:"var pucl = document.getElementById("demo");",再设置关键字词:SearchHighlight("我的磨 wodemo CSS 撰文");。关键字词的样式修改位置:<b style='color:red;'>$1</b>,注意保留"$1"。

下面附上我的磨盘专用版,适用于文件列表位置的关键字词高亮,放在尾部javascript里:

function SearchHighlight(keyword) 
{
var pucl = document.getElementsByTagName("ul")[0];
//查找关键词所在范围内
if("" == keyword) return;
var temp=pucl.innerHTML;
var htmlReg = new RegExp("\<.*?\>","i");
var arrA = new Array();
//替换HTML标签
for(var i=0;true;i++)
{
var m=htmlReg.exec(temp);
if(m)
{
arrA[i]=m;
}
else
{
break;
}
temp=temp.replace(m,"{[("+i+")]}");
}
words = unescape(keyword.replace(/\+/g,' ')).split(/\s+/);
//替换关键字
for (w=0;w<words.length;w++)
{
var r = new RegExp("("+words[w].replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&")+")","ig");
temp = temp.replace(r,"<b style='color:red;'>$1</b>");
//上面的style=' '定义关键字的样式
}
//恢复HTML标签
for(var i=0;i<arrA.length;i++)
{
temp=temp.replace("{[("+i+")]}",arrA[i]);
}
pucl.innerHTML=temp;
}

SearchHighlight("安卓 代码");
//填写要加亮的关键字,用空格隔开

原代码贴及演示请查看Javascript关键字高亮显示实现代码(附我的磨专用版)。

全文完