用JavaScript突出显示关键词（JQuery版）

最新推荐文章于 2024-07-16 16:43:05 发布

jiahaiwu

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量279

点赞数

分类专栏： javascript 文章标签： javascript jquery function exception prototype html

本文链接：https://blog.csdn.net/jiahaiwu1986/article/details/6769475

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 高亮显示关键词 </TITLE>
<Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312">
</HEAD>
<style type="text/css">
.entry
{
font:Arial, Helvetica, sans-serif;
padding-bottom:5px;
padding-left:0px;
padding-right:0px;
clear:both;
padding-top:10px;
}
.cc{
font-size:14px;
}

.high{
background-color:yellow;
color:red;
}
</style>
<SCRIPT LANGUAGE="JavaScript" src="jquery-1.4.2.min.js"></SCRIPT>
<script type="text/javascript" language="javascript">

function highlight(selector,phrase,spanStyle)
{
    if(!selector || !phrase)
    {
        return;
    }
    var items = null;
    try
    {
        items = phrase.split(/[ !-\/:-@{-~\[-\^`]+/igm);  //匹配特殊字符，拆分字符串
    }
    catch(e)
    {
        //alert("分解字符串时出现错误：phrase = "+phrase);
    }
    $(selector).each(function(index){
         var data = $(this).html();
         if(!data) return;
         for(var j=0;j<items.length;j++)
         {
             var iterm = $.trim(items[j]);
             if(iterm!="")
             {
                 var pattern = new RegExp("(<[^<>]+>)|"+iterm,"igm");
                 try
                 {
         data= data.replace(pattern,function(hitTerm){
            if(hitTerm.charAt(0)=='<')
         {
           return hitTerm;
         }
         else
         {
           return  "<span class="+spanStyle+">" + hitTerm + "</span>";
         }
       });
                 }
                 catch(exception)
                 {
                    //alert("替换文本出现错误：pattern = "+pattern+" , hiterm = "+hiterm);
                 }
              }
         }
         $(this).html(data);
     });
}

$(document).ready(function(){
highlight('.cc','过程','high');
});
</script>
<BODY>
<span class="cc">
稍微解释一下：本过程是，把需要高亮显示的Dom节点找出来，取得其中的HTML内容，然后替换成新的样式。这里用到了JQuery框架，是继prototype之后又一个优秀的Javascrīpt框架，可以到官方站点http://jquery.com/下载。
</span>
</BODY>
</HTML>

jiahaiwu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript突出显示关键词（JQuery版）

高亮显示关键词 .entry{ font:Arial, Helvetica, sans-serif; padding-bottom:5px;padding-left:0px;padding-right:0px;clear:both
复制链接

扫一扫