关键字高亮显示(JavaScript)

时间：2010-09-01 来源：黑耗子

屏蔽HTML标签，支持多关键字（以空格间隔），关键字内可含有特殊字符

关键字高亮显示

<!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 l = document.getElementById(idVal);   
        if("" == keyword) return;
        var temp=l.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]);
        }
        l.innerHTML=temp;
    }
    SearchHighlight("result","博客园 的 div [123]");
    </script>

</body>
</html>