• 关键字高亮显示(JavaScript)


    屏蔽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 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>
  • 相关阅读:
    10A:子串计算
    09I:鸡蛋的硬度
    09H:数字组合
    09G:登山
    09F:股票买卖
    09E-计算字符串距离
    09D-最大上升子序列和
    09C-全排列
    02C-垃圾炸弹
    【c#基础】vs2019设置高级选项
  • 原文地址:https://www.cnblogs.com/heihaozi/p/1815197.html
Copyright © 2020-2023  润新知