这篇文章介绍了JS将搜索的关键字高亮显示实现代码,有需要的朋友可以参考一下

用JS让文章内容指定的关键字加亮

是这样的..

现在有这些关键字:美容,生活,购物
当在文章里头出现这些关键字,就把它加亮显示..

文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...
不知道怎样来实现这样的功能啊?特此求助

复制代码代码如下:
<script language="JavaScript">
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将搜索的关键字高亮显示实现代码的更多相关文章

  1. javascript 关键字高亮显示实现代码

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  2. z-blog博客组插件openSug.js百度搜索下拉框提示代码

      z-blog安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让z-blog搜索更便捷! https://www.opensug.org/.../opensug_z-blog_v1.0 ...

  3. 原生Js 两种方法实现页面关键字高亮显示

    原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...

  4. spring data solr 搜索关键字高亮显示

    spring data solr 搜索关键字高亮显示 public Map<String, Object> highSearch(Map searchMap) { Map map = ne ...

  5. 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码】

    项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...

  6. 使用jsonp跨域调用百度js实现搜索框智能提示(转)

    http://www.cnblogs.com/oppoic/p/baidu_auto_complete.html 项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好 ...

  7. 关于JS中的this关键字

    在学习js时,应该先了解下this关键字,关于js中的this关键字和其他的面向对象语言中的this是不同的,比如在java中,this指的的是当前对象,而在js中,w3c是这样规定的: 关键字 th ...

  8. CI 结合 vue.js 的搜索功能模块

    CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...

  9. JQuery :contains选择器,可做搜索功能,搜索包含关键字的dom

    假设有一个加油站列表,找到所有包含某某关键字的加油站. 选择所有包含 "is" 的 <p> 元素: $("p:contains(is)") 搜索功能 ...

随机推荐

  1. js showModalDialog打开新的页面给原页面传值问题

    a.html中打开一个新页面b.html,b.html页面给a.html中的input传一个值并将value赋给input框. a.html: <html>  <head>   ...

  2. 如何减少不能重现的Bug

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何减少不能重现的Bug.

  3. javascript中bind,apply,call的相同和不同之处

    javasctipt中bind,apply,call的相同点是: 1,都是用来改变this的指向; 2,都可以通过后续参数进行传参; 3,第一个参数都是指定this要指向的对象; 不同点: 1,调用方 ...

  4. CSS-div漂浮

    显示效果如下: 代码如下: <div style="width:100%;border-top:0px solid #999999;"> <div style=& ...

  5. 雄踞AppStore榜首的游戏&lt;别踩到白块儿&gt;源码分析和下载(一)

    AppStore和Android市场情况 莫名其妙爆红的游戏 真的莫名其妙,笔者下这个游戏两次.第一次在豌豆荚排行榜看到这款游戏,名字怪怪的,下载下来尝试一下,没认为有什么新颖的,还在思虑这是不是刷榜 ...

  6. matlab2013a for linux/Ubuntu 安装步骤及创建快捷方式(ubuntu14.04下安装)

    1.挂载安装镜像:sudo mount -o loop myfile.iso /media/mnt   #挂载ISO文件,使用參数 -o loop      mnt为已经建立好的文件夹. 2.运行安装 ...

  7. Redis学习手册(内存优化)

    自从Redis 2.2之后,很多数据类型都可以通过特殊编码的方式来进行存储空间的优化.其中,Hash.List和由Integer组成的Sets都可以通过该方式来优化存储结构,以便占用更少的空间,在有些 ...

  8. hi3531的h264压缩中改动波特率

    typedef struct hiVENC_ATTR_H264_CBR_S { HI_U32 u32Gop; HI_U32 u32StatTime; HI_U32 u32ViFrmRate; HI_F ...

  9. stack计算表达式的值

    9.52 使用stack对象处理带圆括号的表达式.遇到左圆括号时,将其标记下来.当你在一个左括号之后遇到右圆括号时,弹出stack对象中这两边括号之间的元素,直到遇到左括号,将左括号也一起弹出栈. 接 ...

  10. WPF中DataGrid的ComboBox的简单绑定方式(绝对简单)

    在写次文前先不得不说下网上的其他wpf的DataGrid绑定ComboBox的方式,看了之后真是让人欲仙欲死. 首先告诉你一大堆的模型,一大堆的控件模板,其实或许你紧紧只想知道怎么让combobox怎 ...