zoukankan      html  css  js  c++  java
  • 关键字高亮显示(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>
  • 相关阅读:
    关于MySQL INT类型长度的疑惑
    uwp 的锁屏功能
    QT5 动态链接库的创建和使用
    Qt 自定义事件的实现
    学习k8s本地虚拟机安装minikube
    建议收藏!细说HashMap实现,Hash冲突模拟思路讲解。
    95. Unique Binary Search Trees II
    96. Unique Binary Search Trees(dp)
    574 React系列(一)
    如何在Win7电脑上增加新磁盘分区?
  • 原文地址:https://www.cnblogs.com/heihaozi/p/1815197.html
Copyright © 2011-2022 走看看