网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 文字链接 >> 正文
最新文章
· 单行文字上下无缝循环滚动
· 鼠标移入/移出颜色渐变
· 链接翻滚的文字特效
· 鼠标跟随效果的链接文字提示
· JS仿腾讯QQ网站的链接文字提示效果
· 链接文字向下一像素
· CSS实现带背景图片的文字链接
· Effects Module效果,jQuery 隐性文本
· JS实现打字机式字符输出效果
· 从天上掉下来的文字
热门文章
 CSS实现链接下划虚线效果
 JS实现打字机式字符输出效果
 单行文字上下无缝循环滚动
 符合标准的间歇性向上滚动代码(兼容
 JavaScript实现搜索关键字高亮
 Javascript动态调整文章的行距、字
 支持链接到新页面的锚点平滑跳转-A
 显示在文本框里的Js打字效果代码
 CSS实现带背景图片的文字链接
 JS实现字体大中小切换
相关文章
JavaScript实现搜索关键字高亮
JS实现文章内容关键字加亮效果
输入指定字符后页面匹配字符串变红高亮
指定ID的元素内的关键字高亮显示
来源:博客园 更新时间:2010/9/2 17:08:21 阅读次数: 我要投稿
△运行 ☉预览 #复制 +收藏
特效代码:
<!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">
         <div>博客园是面向软[123]件开发者的高品质网络div媒体和社区</div>
       <div>博客园一直致力于为开发者打造更优秀的网络平台</div>
       <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>

△运行 ☉预览 #复制 +收藏
特效说明:

  屏蔽HTML标签,支持多关键字(以空格间隔),关键字内可含有特殊字符

  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号