JS将搜索的关键字高亮显示实现代码
用JS让文章内容指定的关键字加亮
是这样的..
现在有这些关键字:美容,生活,购物
当在文章里头出现这些关键字,就把它加亮显示..
文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...
不知道怎样来实现这样的功能啊?特此求助
function highlight(key) {
var key = key.split('|');
for (var i=0; i<key.length; i++) {
var rng = document.body.createTextRange();
while (rng.findText(key[i]))
//rng.pasteHTML(rng.text.fontcolor('red'));
rng.pasteHTML('<div style="border:1 solid red;display:inline"><a href="#" title="+ rng.text +">' + rng.text + '</a></div>');
}
} //脚本学堂 http://www.jbxue.com
highlight('文章|关键|功能')
</script>
JS将搜索的关键字高亮显示实现代码的更多相关文章
- javascript 关键字高亮显示实现代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- z-blog博客组插件openSug.js百度搜索下拉框提示代码
z-blog安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让z-blog搜索更便捷! https://www.opensug.org/.../opensug_z-blog_v1.0 ...
- 原生Js 两种方法实现页面关键字高亮显示
原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...
- spring data solr 搜索关键字高亮显示
spring data solr 搜索关键字高亮显示 public Map<String, Object> highSearch(Map searchMap) { Map map = ne ...
- 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...
- 使用jsonp跨域调用百度js实现搜索框智能提示(转)
http://www.cnblogs.com/oppoic/p/baidu_auto_complete.html 项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好 ...
- 关于JS中的this关键字
在学习js时,应该先了解下this关键字,关于js中的this关键字和其他的面向对象语言中的this是不同的,比如在java中,this指的的是当前对象,而在js中,w3c是这样规定的: 关键字 th ...
- CI 结合 vue.js 的搜索功能模块
CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...
- JQuery :contains选择器,可做搜索功能,搜索包含关键字的dom
假设有一个加油站列表,找到所有包含某某关键字的加油站. 选择所有包含 "is" 的 <p> 元素: $("p:contains(is)") 搜索功能 ...
随机推荐
- MAX函数和GROUP BY 语句一起使用的一个误区
使用MAX 函数和 GROUP 的时候会有不可预料的数据被SELECT 出来.下面举个简单的例子:想知道每个SCOREID 的 数学成绩最高的分数. 表信息:/*DDL Information For ...
- 安装Rational Rose启动报错:无法启动此程序,由于计算机中丢失 suite objects.dll。
执行Rational Rose的时候假设出现这种错误,先检查环境变量有没有common的地址,假设没有直接配上就OK:配置例如以下:D:\Program Files\Rational\Common; ...
- Android 接收短信
启动程序时启动一个service,在service里注册接收短信的广播,当手机收到短信里,打印出短信内容跟电话号码. package com.lmy.SmsListener; import andro ...
- merge into sql优化
今天网友说他的merge into sql跑了15分钟了还没有跑出数据,问我能不能优化一下,我让他把sql和sql的执行计划发过来 merge into F_Sal_P_Camp_Samp_Cust_ ...
- 并发与多版本:update重启动问题
以下演示重启动问题,请注意 before触发器和after触发器的行为区别,因为before触发器会触发两次而导致重启动问题,因此使用after触发器更加高效,应该尽量避免在所有触发器中使用自治事务 ...
- HttpClient4.4 进行Http连接通讯
以前一直使用jdk自带的urlConnection来进行http通讯,HttpClient与之相比,HttpClient更具有灵活度和易用性.HttpClient能够方便使用连接池,使用时需要重新创建 ...
- C#三元运算符
?:表达式1?表达式2:表达式3如果1为真则执行2,为假执行3
- Maven笔记(二)仓库
1.仓库布局 任何一个构件都有其唯一的坐标,根据这个坐标可以定义其在仓库中的唯一存储路径,这就是Maven的仓库布局方式 路径与坐标的对应关系为:groupId/artifactId/version/ ...
- Unity3D 之UGUI 图片
这里来降价下Unity3Dl的图片 先创建一个图片 图片的属性 Preserve Aspect -->保持图片的原始宽高比例 Set native Size -->图片原始尺寸 Image ...
- 阿里云ECS被攻击
今天发现阿里云ECS被攻击了,记录一下, /1.1 Match1:{ :;};/usr/bin/perl -e 'print .content-type: text/plain.r.n.r.nxsuc ...