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>
  • 相关阅读:
    this指针是什么?
    C++多态实现原理
    面试题2:实现Singleton模式
    面试题1:赋值运算符函数
    1.Two Sum
    朴素贝叶斯
    K近邻法
    感知机
    数据类型、用户交互、赋值运算
    蓝牙技术概述
  • 原文地址:https://www.cnblogs.com/heihaozi/p/1815197.html
Copyright © 2011-2022 走看看