关键字高亮显示,js轻松实现

用js实现关键字搜索高亮显示,内附源码点击下载

<script>
    //关键字高亮显示func
    function InitialKeywordsShow(_keywords, obj, caseTrue) {
        //var reg = new RegExp(_keywords, "g");//区分大小写
        var reg = new RegExp(_keywords, "gi"); //不区分大小写
        if (caseTrue) {
            var reg = new RegExp(_keywords, "g");
        }
        if (obj && obj.childNodes && obj.childNodes.length > 0) {
            for (var i = 0; i < obj.childNodes.length; i++) {
                if (obj.childNodes[i].nodeType == 3 && obj.childNodes[i].nodeValue && obj.childNodes[i].nodeValue.length > 0) {
                    var txtnew = obj.childNodes[i].nodeValue.replace(reg, "<font color=‘red‘ style=‘ background:#e48b00;color:#fff;‘>" + _keywords + "</font>");
                    var _span = document.createElement("span");
                    _span.innerHTML = txtnew;
                    obj.replaceChild(_span, obj.childNodes[i]);
                }
                else if (obj.childNodes[i].nodeType == 1) {
                    InitialKeywordsShow(_keywords, obj.childNodes[i], caseTrue);
                }
            }
        }
    }
    //搜索func
    function SearchClick() {
        var fonts = document.getElementsByTagName("font");
        if (fonts && fonts.length > 0) {
            for (var i = 0; i < fonts.length; i++) {
                fonts[i].style.backgroundColor = "#fff";
                fonts[i].style.color = "black"
            }
        }
        var keyWords = document.getElementById("txtKeywords").value;
        var obj_content = document.getElementById("content");
        if (!keyWords) {
            alert("请输入关键字");
            return false;
        }
        var upTrue = document.getElementById("chkUp").checked;
        InitialKeywordsShow(keyWords, obj_content, upTrue);
    }
</script>

--尊重他人成果,转载请注明出处,谢谢!

时间: 2024-08-24 10:54:24

关键字高亮显示,js轻松实现的相关文章

jQuery_review之表单中的隔行变色以及关键字高亮显示

在很多项目中,当然可以避免使用table,而使用div来替代,但是为了能够快速的交付项目,而且对网络优化以及搜索引擎没有太高的妥协的话,我们当然可以使用喜闻乐见的表格来进行布局.使用表格布局非常适合项目团队中有很多都是新成员,技术尚未成熟到可以从容判断div的布局会带来什么问题的情况.下面是使用table进行布局实现表格中隔行变色以及关键字高亮显示的jQuery实现. 这里要注意几个事情就是table的CSS设置中,thead以及tbody中是不好设置border属性的,所以只能妥协使用td的b

ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(七) 之 历史记录查询(时间,关键字,图片,文件),关键字高亮显示。

前言 上一篇讲解了如何自定义右键菜单,都是前端的内容,本篇内容就一个:查询.聊天历史纪录查询,在之前介绍查找好友的那篇博客里已经提到过 Elasticsearch,今天它又要上场了.对于Elasticsearch不感冒的同学呢,本篇可以不用看啦. from baidu: ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java开发的,并作为Apache许可条款下的开放源码发布,

js模糊搜索关键字高亮显示,将字体变成红色

//搜索键关键字变色 var nWord = "${guanj}"; //获取el表达式冲文本框输入的关键字 var array = nWord.split(""); //分割 var dsa=document.getElementsByName("dsas");//获取全部商品 for ( var t = 0; t < dsa.length; t++) { for ( var i = 0; i < array.length; i++

angular过滤器 -- 关键字高亮显示

前端处理使给定关键字在文本中高亮显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>filterTest</title> </head> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angul

使用moment.js轻松管理日期和时间

大家在前端Javascript开发中会遇到处理日期时间的问题,经常会拿来一大堆处理函数才能完成一个简单的日期时间显示效果.今天我给大家介绍一个轻量级的Javascript日期处理类库:moment.js,使用它可以轻松解决前端开发中遇到的种种日期时间问题. 查看演示 下载源码 moment.js不依赖任何第三方库,支持字符串.Date.时间戳以及数组等格式,可以像PHP的date()函数一样,格式化日期时间,计算相对时间,获取特定时间后的日期时间等等,本文有如下举例. 格式化日期 当前时间: m

EasyStruct.js轻松创建可填入式html模板结构

在前端开发的工作中,经常会碰到这样的情况,加载页面数据的时候,有一部分内容的结构是重复的,只是数据不一样.比如说论坛.贴吧里面的各个楼层,还有一些类似工资报表.销售报表的每一行,举个例子: function addTr(data1,data2,data3){ return '<tr style="text-align:center"><td style="height:40px;">'+data1+'<td><td styl

swipe.js 轻松实现手机端滑动效果

插件下载地址 官网:http://www.swipejs.comgithub:https://github.com/bradbirdsall/Swipe 插件特色 swipe.js是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚动间隔,返回回调函数等.经常可见使用在移动开发中 使用方法 HTML代码如下: <div id='slider' class='swipe'> <div class='swipe-wrap'> <div>

JS轻松实现单击文本框弹出选择日期

我的开发工具是vs2005,你们可选择自己合适的开发工具 首先创建个文本框<input id="txFDate" name="txFDate" type="text" value="" onfocus="setday(this)" runat="server"   /> 可以看到文本框有个onfocus触发事件,现在就贴上这个事件的代码(代码比较长,但是只需要复制所有代码把他

使用tdcss.js轻松制作自己的style guide

http://jakobloekke.github.io/tdcss.js/ 在前端开发中,如果能够有一个style guide对于设计来说就显得专业稳定,一致性.在上述链接中,有一个tdcss.js的工具可以帮助你生成可视化的style guide, 非常方便.其原理就是使用那个js文件在html加载完成后对特定section来做重新structure,形成style guide的样式 @stop-color: red; @wait-color: orange; @go-color: gree