1 源码

function keywordHighlighten(querySelector, key, bgColor){//文本关键字高亮
var doms = document.querySelectorAll(querySelector);
//console.log("target doms:", doms);
doms.forEach(function(element, index, array){
var oDiv = element;
var oChilds = oDiv.childNodes;
var color = isNaN(bgColor)==true?bgColor : "orange";
//console.log("color:", color);
var sKey = "<span style='background-color: "+color+";'>"+key+"</span>";
var 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
}
});
return doms;
}
function keywordsHighlighten(querySelector, keywords, bgColor){//同文本同DOM下的批量关键字高亮
keywords.forEach(function(element, index, array){
var keyword = element;
keywordHighlighten(querySelector, keyword, bgColor);
});
}
keywordsHighlighten(
"body",
[
"172.78.6.13",
"172.78.6.17",
"172.78.6.18",
"172.78.6.19",
"172.78.6.20",
"172.78.6.21",
"172.78.6.42",
"172.78.6.43",
"172.78.6.44"
],
"red"
);

[JavaScript]使页面内目标关键字高亮的更多相关文章

  1. JavaScript 放置在文档最后面可以使页面加载速度更快

    JavaScript 放置在文档最后面可以使页面加载速度更快

  2. 移动端html5页面长按实现高亮全选文本内容的兼容解决方式

    近期须要给html5的WebAPP在页面上实现一个复制功能:用户点击长按文本会全选文字并弹出系统"复制"菜单.用户能够点击"复制"进行复制操作.然后粘贴到App ...

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

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

  4. 如何使页面滚动条移动到指定元素element的位置处?

    如何使页面滚动条移动到指定元素element的位置处? 在用selenium做测试时,会遇到需要操作的元素不在当前可视页面中的情况,如果是手工测试,自然很简单,手动拖拽滚动条到目标元素处即可. 那么, ...

  5. Html5页面内使用JSON动画的实现

    有一天我们的UI设计师找到我说,要把页面中我自己用程序写的动画,换成他们给的json动画,原因是有的动画很复杂,自己写起来达不到他们的预期效果(写到这里我突然想到一个问题,这么复杂的动画为什么不使用g ...

  6. jQuery实现页面内锚点平滑跳转

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...

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

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

  8. JavaScript备忘录(1)——内置类型

    JavaScript有一些内置类型,还有很多常用的内置的方法,本文稍作总结,以备查阅. 值类型 我的理解,值类型是分配在栈上的,而引用类型(当然也包括引用类型内部的值类型)是分配在堆上的.值类型是不可 ...

  9. Javascript刷新页面大全

    非模态刷新父页面:window.opener.location.reload(); 模态刷新父页面:window.dialogArguments.location.reload(); 先来看一个简单的 ...

  10. Javascript刷新页面的几种方法:

    Javascript刷新页面的几种方法: 1    history.go(0) 2    window.location.reload() window.location.reload(true)  ...

随机推荐

  1. CF527D 题解

    题意:数轴上有 \(n\) 个点,第 \(i\) 个点的坐标为 \(x_i\),权值为 \(w_i\).两个点 \(i,j\) 之间存在一条边当且仅当 \(abs(x_i-x_j)\geq w_i+w ...

  2. Spring系列之基于 Java 的容器配置-9

    目录 组合基于 Java 的配置 使用`@Import`注解 有条件地包含`@Configuration`类或`@Bean`方法 结合 Java 和 XML 配置 组合基于 Java 的配置 Spri ...

  3. UI自动化之【报错记录-selenium】

    1.找不到元素 写脚本的过程中时不时就会报这种错,一般路径定位不到直接复制xpath基本就能找到了,也有时候是因为有iframe或是句柄不对 原因: ①没有加等待时间,脚本运行到那步时,页面还没加载完 ...

  4. centos7.2 64位安装php7.2.12

    1 安装php所需要的扩展 yum -y install libxml2 libxml2-devel openssl openssl-devel bzip2 bzip2-devel curl curl ...

  5. Linux系统管理实战-配置静态IP

    配置静态IP 前置条件 防火墙: EL7 EL6 查看状态: # systemctl status firewalld # /etc/init.d/iptables status 立即关闭: # sy ...

  6. COM调用 – VB、PB

    本文使用Delphi和C++创建CRC32的COM文件(Dll). VB: V9.0 PB: V8.0 Delphi创建的文件,提供给VB9调用:C++创建的文件,提供给PB8调用. 一.VB部分 C ...

  7. 关于linux中的根目录下常见目录

    1 Linux中默认目录功能目录能根目录,文件的最顶端,整个文件系统的根目录存放系统所需要的重要命令,Is. cCP. mkdir等,us/ bin也存放了一些系统命令,这/bin|些命令对应的文件都 ...

  8. Postman设置Cookie参数为全局变量-环境变量设置IP参数

    前提:在遇到多接口测试时,容易出现限制登录的情况 可以使用两种情况: 1.在调用其他接口前,先调用登录接口:这个方法在一般情况下可以,但是对于有些环境,比如像小程序登录时token(或cookie)是 ...

  9. app 好用的手机端开发调试工具插件 vconsole vue3

    效果:可以在手机上看控制台的内容 $ npm install vconsole 在main.js里引入 // 添加移动端log查看调试器 import Vconsole from 'vconsole' ...

  10. redis单机搭建

    1.获取redis wget http://download.redis.io/releases/redis-6.2.7.tar.gz tar -xvf redis-6.2.7.tar.gz 2.安装 ...