关键字高亮显示(JavaScript)
屏蔽HTML标签,支持多关键字(以空格间隔),关键字内可含有特殊字符
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<!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>
<title>关键字高亮显示</title>
</head>
<body>
<div class="result" id="result">
<img src="" /><div>博客园是面向软[123]件开发者的高品质网络div媒体和社区</div>
<span>博客园一直致力于为开发者打造更优秀的网络平台</span>
<div>博客园是面向软件开发者的高品质网络媒体和社区</div>
</div>
<script>
function SearchHighlight(idVal,keyword)
{
var pucl = document.getElementById(idVal);
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>");
}
//恢复HTML标签
for(var i=0;i<arrA.length;i++)
{
temp=temp.replace("{[("+i+")]}",arrA[i]);
}
pucl.innerHTML=temp;
}
SearchHighlight("result","博客园 的 div [123]");
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>关键字高亮显示</title>
</head>
<body>
<div class="result" id="result">
<img src="" /><div>博客园是面向软[123]件开发者的高品质网络div媒体和社区</div>
<span>博客园一直致力于为开发者打造更优秀的网络平台</span>
<div>博客园是面向软件开发者的高品质网络媒体和社区</div>
</div>
<script>
function SearchHighlight(idVal,keyword)
{
var pucl = document.getElementById(idVal);
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>");
}
//恢复HTML标签
for(var i=0;i<arrA.length;i++)
{
temp=temp.replace("{[("+i+")]}",arrA[i]);
}
pucl.innerHTML=temp;
}
SearchHighlight("result","博客园 的 div [123]");
</script>
</body>
</html>
![](https://images.cnblogs.com/cnblogs_com/heihaozi/1575453/o_onemore.jpg)
作者:万猫学社
出处:http://www.cnblogs.com/heihaozi/
版权声明:本文遵循 CC 4.0 BY-NC-SA 版权协议,转载请附上原文出处链接和本声明。
微信扫描二维码,关注万猫学社,回复「电子书」,免费获取12本Java必读技术书籍。
出处:http://www.cnblogs.com/heihaozi/
版权声明:本文遵循 CC 4.0 BY-NC-SA 版权协议,转载请附上原文出处链接和本声明。
微信扫描二维码,关注万猫学社,回复「电子书」,免费获取12本Java必读技术书籍。