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)") 搜索功能 ...
随机推荐
- 【转】解决Cannot change version of project facet Dynamic web module to 2.5
http://blog.csdn.net/steveguoshao/article/details/38414145 我们用Eclipse创建Maven结构的web项目的时候选择了Artifact I ...
- 在JAVA中线程到底起到什么作用
这是javaeye上非常经典的关于线程的帖子,写的非常通俗易懂的,适合任何读计算机的同学. 线程同步 我们可以在计算机上运行各种计算机软件程序.每一个运行的程序可能包括多个独立运行的线程(Thread ...
- cocos2d-x增加控制台程序代码
#include "main.h" #include "AppDelegate.h" #include "CCEGLView.h" USIN ...
- 谋哥:App排行榜的秘密
App在改变世界,改变人们的生活. 如今购物大家都用淘宝.京东,吃饭你会用饭否,看天气预报你用墨迹天气,看视频用优酷.K歌你用唱吧,聊天联系你用微信,看新闻你用今日头条等等.你的生活由你自 ...
- Linux内核:关于中断你须要知道的
1.中断处理程序与其它内核函数真正的差别在于,中断处理程序是被内核调用来对应中断的,而它们执行于中断上下文(原子上下文)中,在该上下文中执行的代码不可堵塞. 中断就是由硬件打断操作系统. 2.异常与中 ...
- Linux新手入门:通过chmod改变文件权限--转
前面介绍过在Linux中如何查看文件的属性,在Linux文件权限详解中我们介绍了Linux文件的三种身份和四种权限,三种身份分别为: u:文件的拥有者 g:文件所属的群组 o:其他用户 对于每个身份, ...
- Android5.0常用颜色属性说明
在使用Eclipse的时代,我们很少去在style文件给整个应用或者Activity去设定颜色,那是因为即使设置也不会提升用户的视觉效果.但是材料设计号称让没有设计功底的人也能做出漂亮的App,那我们 ...
- ModelSim之命令行仿真入门
下面是我们的Tcl仿真步骤:启动ModelSim SE, 首先看到在在ModelSim SE右边的窗口有ModelSim> 这样的提示符.在提示符后,顺序运行以下命令: vlib work ...
- Python之路【第二十一篇】:Django之Form组件
Django之Form组件 Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 小试牛刀 1. ...
- Topself
TopShelf简介 个人理解:开源.跨平台的服务框架.提供一种方式以控制台编写windows服务,与windows服务相比,目前只发现便于调试. 官网网站:http://docs.topshelf- ...