/**
* @id 父节点id
* @key 关键字
*/
function keyLight(id, key, bgColor){
var oDiv = document.getElementById(id),
oChilds = oDiv.childNodes,
bgColor = bgColor || "orange",
sKey = "<b style='">";'>"+key+"</b>",
rStr = new RegExp(key, "g");
for(var i =0; i<oChilds.length-1; i++){
if(oChilds[i].nodeType == 3 && /\s/.test(oChilds[i].nodeValue)){ //删除空白的节点
oChilds[i].parentNode.removeChild(oChilds[i]);
}
oChilds[i].innerHTML = oChilds[i].innerHTML.replace(rStr,sKey); //替换key
}
}

html关键字高亮的更多相关文章

  1. IOS_SearchBar搜索栏及关键字高亮

    搜索框的效果演示: 这个就是所谓的搜索框了,那么接下来我们看看如何使用代码来实现这个功能. 我所使用的数据是英雄联盟的英雄名单,是一个JSON数据的txt文件, JSON数据的处理代码如下所示: ? ...

  2. 在 Angular 中实现搜索关键字高亮

    在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...

  3. C#,WPF中使用多文本显示数据,并对其数据进行关键字高亮等操作

    需求:针对多文本信息显示,我们需要对其内容中的某些关键字或者某行进行高亮显示,并用不同颜色显示. 分析:在C#中,首先要进行多文本信息显示,可以RichTextBox(不要使用TextBox)控件,该 ...

  4. 如何实现IOS_SearchBar搜索栏及关键字高亮

    搜索框的效果演示: 这个就是所谓的搜索框了,那么接下来我们看看如何使用代码来实现这个功能. 我所使用的数据是英雄联盟的英雄名单,是一个JSON数据的txt文件, JSON数据的处理代码如下所示: // ...

  5. JavaScript搜索关键字高亮的实现

    高亮功能主要是指对页面中指定区域的指定文字进行高亮显示,也就是背景着色.一般在搜索结果页面会经常用到这个功能. 下面就为大家提供一种解决方案,用javascript实现. 首先在<head> ...

  6. 简单JavaScript语句实现搜索关键字高亮功能

    高亮功能主要是指对页面中指定区域的指定文字进行高亮显示,也就是背景着色.一般在搜索结果页面会经常用到这个功能. 下面就为大家提供一种解决方案,用javascript实现. 首先在<head> ...

  7. qt关键字高亮

    qt的高亮显示主要是使用qsyntaxhighlighter类,由于qsyntaxhighlighter是抽象基类,所以需要继承并自己实现 //头文件 #ifndef MARKDOWN_HIGHLIG ...

  8. 【php+js】用PHP或者JS怎么显示搜索到的关键字高亮,及其文章里包含关键字的一小段

    1.想要实现的效果: 2.思路:小数据量使用 php的正则替换,即[preg_replace()]函数 -->> 支持多个关键词高亮显示,中间参数1和参数2放入对应的数组即可. $titl ...

  9. 设置Shader关键字高亮(网上转)

    原文链接:http://www.cnblogs.com/cg_ghost/archive/2011/11/30/2268734.html 经过试验,在VS2012有效. 1. 创建或编辑usertyp ...

  10. vi/vim 消除搜索后的关键字高亮

    使用vi或vim命令搜索某个关键字之后,取消高亮显示的方法 只要输入:noh即可

随机推荐

  1. 日志分析平台ELK之搜索引擎Elasticsearch集群

    一.简介 什么是ELK?ELK是Elasticsearch.Logstash.Kibana这三个软件的首字母缩写:其中elasticsearch是用来做数据的存储和搜索的搜索引擎:logstash是数 ...

  2. 玩转Libmodbus(二) 写代码体验

    libmodbus在线文档 https://www.jianshu.com/p/d93c17485c0a 原创篇 参考上一篇转载的博客,我的ubuntu上的最终生成的动态库的路径,下图所示 我的lin ...

  3. Effective C++ 读书笔记 名博客

    https://www.cnblogs.com/harlanc/tag/effective%20c%2B%2B/default.html?page=3

  4. spring-boot-route(五)整合Swagger生成接口文档

    目前,大多数公司都采用了前后端分离的开发模式,为了解决前后端人员的沟通问题,后端人员在开发接口的时候会选择使用swagger2来生成对应的接口文档,swagger2提供了强大的页面调试功能,这样可以有 ...

  5. 070 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 02 综合案例-数组移位-从键盘接收数据

    070 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 02 综合案例-数组移位-从键盘接收数据 本文知识点:综合案例-数组移位-从键盘接收数据 说明:因为时间紧张 ...

  6. Numpy中的shape和reshape()

    shape是查看数据有多少行多少列reshape()是数组array中的方法,作用是将数据重新组织 1.shape import numpy as np a = np.array([1,2,3,4,5 ...

  7. 【题解】[USACO13FEB]Tractor S

    题目戳我 \(\text{Solution:}\) 好久没写啥\(dfs\)了,借这个题整理下细节. 观察到答案具有二分性,所以先求出其差的最大最小值,\(\log val\)的复杂度不成问题. 考虑 ...

  8. 使用SignalR和XSLT进行实时注释

    下载source code - 10.1 MB Introduction  众所周知,web请求(HTTP请求)是根据请求/响应机制工作的.通过这种方式,作为客户机的浏览器使用GET或POST向服务器 ...

  9. 多测师讲解 _接口自动化框架设计分层思想(001)_高级讲师肖sir

    第一层: 第二层:调用接口层 VOQGWBZYNBOAVZGE

  10. 多测师讲解html _链接标签004_高级讲师肖sir

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>链 ...