[JavaScript]使页面内目标关键字高亮
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]使页面内目标关键字高亮的更多相关文章
- JavaScript 放置在文档最后面可以使页面加载速度更快
JavaScript 放置在文档最后面可以使页面加载速度更快
- 移动端html5页面长按实现高亮全选文本内容的兼容解决方式
近期须要给html5的WebAPP在页面上实现一个复制功能:用户点击长按文本会全选文字并弹出系统"复制"菜单.用户能够点击"复制"进行复制操作.然后粘贴到App ...
- 在 Angular 中实现搜索关键字高亮
在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...
- 如何使页面滚动条移动到指定元素element的位置处?
如何使页面滚动条移动到指定元素element的位置处? 在用selenium做测试时,会遇到需要操作的元素不在当前可视页面中的情况,如果是手工测试,自然很简单,手动拖拽滚动条到目标元素处即可. 那么, ...
- Html5页面内使用JSON动画的实现
有一天我们的UI设计师找到我说,要把页面中我自己用程序写的动画,换成他们给的json动画,原因是有的动画很复杂,自己写起来达不到他们的预期效果(写到这里我突然想到一个问题,这么复杂的动画为什么不使用g ...
- jQuery实现页面内锚点平滑跳转
平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...
- IOS_SearchBar搜索栏及关键字高亮
搜索框的效果演示: 这个就是所谓的搜索框了,那么接下来我们看看如何使用代码来实现这个功能. 我所使用的数据是英雄联盟的英雄名单,是一个JSON数据的txt文件, JSON数据的处理代码如下所示: ? ...
- JavaScript备忘录(1)——内置类型
JavaScript有一些内置类型,还有很多常用的内置的方法,本文稍作总结,以备查阅. 值类型 我的理解,值类型是分配在栈上的,而引用类型(当然也包括引用类型内部的值类型)是分配在堆上的.值类型是不可 ...
- Javascript刷新页面大全
非模态刷新父页面:window.opener.location.reload(); 模态刷新父页面:window.dialogArguments.location.reload(); 先来看一个简单的 ...
- Javascript刷新页面的几种方法:
Javascript刷新页面的几种方法: 1 history.go(0) 2 window.location.reload() window.location.reload(true) ...
随机推荐
- PTA1003 我要通过! (20 分)
PTA1003 我要通过! (20 分) "答案正确"是自动判题系统给出的最令人欢喜的回复.本题属于 PAT 的"答案正确"大派送 -- 只要读入的字符串满足下 ...
- 时间格式转换成指定格式(Vue)
1 /** 2 * Parse the time to string 3 * @param {(Object|string|number)} time 4 * @param {string} cFor ...
- 面向对象ooDay9
精华笔记: 多态:多种形态 同一个对象被造型为不同的类型时,有不同的功能-------所有对象都是多态的(明天总结详细讲) 对象的多态:水.我.你...... 同一类型的引用在指向不同的对象时,有不同 ...
- 解决SpringBoot前后端集成项目导出jar包运行访问页面资源报错“Whitelabel Error Page”问题
一.SpringBoot前后端集成项目导出jar包后运行访问页面资源报错"Whitelabel Error Page"问题 二.解决方案 1.将Controller层移入com.x ...
- nRF51822蓝牙学习 进程记录 3:蓝牙协议学习--简单使用
三天打鱼两天晒网,又学起了蓝牙,不过还好的是终于开始学习蓝牙协议部分了. 但是,一看起来增加了蓝牙协议的例程,真是没头绪啊.本身的教程资料解说太差了,看青风的蓝牙原理详解也是一头雾水. 经过不断地看各 ...
- python高阶编程(二)
1.迭代器 迭代是访问集合元素的一种方式.迭代器是一个可以记住遍历的位置的对象.迭代器对象从集合的第一个元素开始访问,知道所有的元素被访问结束.迭代器只能往下不会后退. 我们已经知道,可以直接作用于f ...
- 【组会】2023_1_6 4d mmwave
A NEW AUTOMOTIVE RADAR 4D POINT CLOUDS DETECTOR BY USING DEEP LEARNING ICASSP 2021 - 2021 IEEE Inter ...
- mysql 递归
MySQL中实现递归查询 对于数据库中的树形结构数据,如部门表,有时候,我们需要知道某部门的所有下属部分或者某部分的所有上级部门,这时候就需要用到mysql的递归查询 1.创建表 DROP TAB ...
- Python操作数据库读书笔记
SQLite 简介 什么是 SQLite? SQLite是一个进程内的库,实现了自给自足的.无服务器的.零配置的.事务性的 SQL 数据库引擎.它是一个零配置的数据库,这意味着与其他数据库一样,您不需 ...
- python3判断ip类型
利用socket库附带的校验功能实现校验.