js实现查询关键词,使其高亮

今天做了一个功能:在页面上查询关键,使其高亮显示,实现代码如下:

css:

   <style type="text/css">
        .highlight
        {
            background-color: yellow;
        }
    </style>

javascript:

 function highlight() {
            clearSelection(); //先清空一下上次高亮显示的内容;
            var searchText = $.trim($(‘#txtKeyWord‘).val()); //获取你输入的关键字;
            if (searchText.length > 0) {
                var regExp = new RegExp(searchText, ‘g‘); //创建正则表达式,g表示全局的,如果不用g,则查找到第一个就不会继续向下查找了;

                $(‘#dialogue .dhc‘).each(function ()//遍历要查询的区域;
                {
                    var html = $(this).html();
                    var newHtml = html.replace(regExp, "<span class=‘highlight‘>" + searchText + ‘</span>‘); //将找到的关键字替换,加上highlight属性;

                    $(this).html(newHtml); //更新文章;
                });
            }
            //prekeyword = searchText;
        }
        function clearSelection() {
            $(‘#dialogue .dhc‘).each(function ()//遍历
            {
                $(this).find(‘.highlight‘).each(function ()//找到所有highlight属性的元素;
                {
                    var thishtml = $(this).html();
                    $(this)[0].outerHTML = thishtml;
                   // $(this).replaceWith(thishtml); //将他们的属性去掉;
                });
            });
        }
时间: 2024-10-03 21:41:53

js实现查询关键词,使其高亮的相关文章

JS实现查询关键词高亮效果

在页面上查询关键,使其高亮显示,实现代码如下: CSS样式:  <style type="text/css">         .highlight        {             background-color: yellow;         }  </style> javascript: function highlight() {             clearSelection(); //先清空一下上次高亮显示的内容:         

Lucene的多域查询、结果中查询、查询结果分页、高亮查询结果和结果评分

1.针对多个域的一次性查询 1.1.三种方案 使用lucene构造搜索引擎的时候,如果要针对多个域进行一次性查询,一般来说有三种方法: 第一种实现方法是创建多值的全包含域的文本进行索引,这个方案最简单.但是这个防范有个缺点:你不能直接对每个域的加权进行控制. 第二种方法是使用MultiFieldQueryParser,它是QueryParser的子类,它会在后台程序中实例化一个QueryParser对 象,用来针对每个域进行查询表达式的解析,然后使用BooleanQuery将查询结果合并起来.当

Solr学习总结(六)SolrNet的高级用法(复杂查询,分页,高亮,Facet查询)

上一篇,讲到了SolrNet的基本用法及CURD,这个算是SolrNet 的入门知识介绍吧,昨天写完之后,有朋友评论说,这些感觉都被写烂了.没错,这些基本的用法,在网上百度,资料肯定一大堆,有一些写的肯定比我的好,不过,这个是Solr系列文章,会从Solr的基础入门讲到实际开发中的分页,高亮,Facet查询等高级用法.所以,基础的入门也会涉及一些,望大家见谅.我用这么多篇文章,来总结Solr 也是为了将Solr 的 安装,配置,开发等等,整个过程的资料,都能总结汇集到一起,这样不管是懂Solr还

Ghost本地安装highlight.js使代码高亮

对于程序员写博客来说,这代码高亮是起码的要求.但是Ghost本身没有支持高亮代码.但是可以通过扩展来实现,它就是highlight.js--附官方网站,看了下首页介绍,真的很强大,现在说说怎么进行安装,很简单. 下载highlight.js 下载地址 本来已经包含了很多支持的高亮语言,如果上面没找到你要的语言,可以在下面继续 勾选,最后点击下方的下载. 解压安装highlight.js 解压highlight.js到Ghost本地的主题文件夹下面的资源文件夹,我这里是: 安装highlight.

iClient JS之查询交互(1)

作者:MR. 在地图应用中,最最基础的当然应该是地图的浏览与展示,其次,我认为就是查询了,之后的各种功能或多或少都要依赖于查询结果.本文为查询交互系列文章的第一篇,主要简介其分类.使用入门以及交互. IServer查询功能体系: 首先,需要简单了解下超图数据格式(数据结构): 从上面可以看出工作空间其实只是相当于一个索引,当然是比较"丰满"的索引,地图.布局.场景类似.数据都存在数据源里的,数据源是若干数据集的集合,数据集又是若干地物的集合,这里的地物是带属性的.IServer发布工作

Node.js 手册查询-5-Ejs 方法

express 中使用 //设置模板目录 app.set('views', path.join(__dirname, 'views')); //设置模板引擎 app.set('view engine', 'html'); //设置引擎后缀. index.html 中的内容可以是 ejs 代码 app.engine('.html', require('ejs').__express); ejs的特性: 1.缓存功能,能够缓存已经解析好的html模版: 2.<% code %>用于执行其中java

原生js实现查询天气的小应用

demo:https://zsqosos.github.io/weather/ 截图: 实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市,随后调用聚合数据的天气API将数据放在页面上.由于ajax不支持跨域,所以采用了jsonp的方式来调用数据. 实现的原理比较简单,HTML和css比较长,我就只将js代码贴出来,想看完整代码的朋友可以去我的github查看 https://github.com/zsqosos

Node.js 手册查询-2-MongoDB数据库方法

MongoDb 标签(空格分隔): 数据库 MongoDb 安装 当前版本 2.X 解压至任意目录,最好不要是c盘. 在根目录下建立一个文件夹用来存储工程 我的例子: 安装至: d:\mongodb 建立存储目录 d:\mongodb\blog 运行CMD,切入bin目录 cd d:\mongodb\bin 启用数据库 mongod -dbpath “d:\mongodb\blog” 这样就完毕了,如果关闭CMD,数据库就会关闭. 建立一个快速启动的bat文件,因为每次启动服务器都是这样的命令

Node.js 手册查询-4-Express 方法

express 标签(空格分隔): node.js express [TOC] 安装: 新版本中命令行工具分家了 npm install -g express //安装 express 然后 npm install -g express-generator //安装 express 命令行工具 express -V 我现在查看到的版本是 4.9.0 npm start 代替 node app.js 启动 http.Server var http = require(‘http’); var se