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. 免费Linux RDP,用来练习linux或者Python,还能做成远程桌面

        分类:资源| 阅读:1103次阅读 goorm提供了免费的Linux容器,用它来在线练习命令行是非常不错的. 它的注册非常简单:https://ide.goorm.io/ 直接用谷歌账号登录即 ...

  2. yum随笔

    1.一般企业的服务器都能联网,所以装包都是装系统给的或者是自己去第三方的源,如下: http://mirrors.aliyun.com/repo/Centos-7.repo http://mirror ...

  3. 如何启动MySQL?

    参见链接:https://www.cnblogs.com/Yanjy-OnlyOne/p/12603117.html

  4. ASP.NET在Repeater中使用Button控件报错

    普通Button在这里会报错,小编找了一天也没有解决这个问题, 这里可以换做LinkButton或者ImageButton替换普通的Button

  5. 会长哥哥帮助安装ubuntu

    今晚突然想到要安装虚拟机,因为我原来上的python预科班里面讲解安装虚拟机,但是我当时没有安装上,导致预科班后面的课我没听懂,今天听课讲到字符和编码 所以想到了我的虚拟机,于是今晚很谨慎的求助会长大 ...

  6. pod进阶

    一.Lifecycle 官网:https://kubernetes.io/docs/concepts/workloads/pods/pod-lifecycle/ 通过前面的分享,关于pod是什么相信看 ...

  7. Linux 复制时排除某文件/目录

    如果要排除/home/data目录下面的a.b.c.三个目录,同时拷贝其它所有目录,执行rsync命令yum install rsync -y #安装rsync 排除单个文件/目录rsync -avP ...

  8. Must be called at the top of a `setup` function vue3使用vue-i18n时出现的报错

    在某js文件中引入 import {useI18n} from "vue-i18n"; 使用:useI18n().t('APP_LOADING') 修改后: import i18n ...

  9. Python第四章实验报告

    一.实验项目名称:<零基础学Python>第四章的14道实例和4道实战 二.实验环境:IDLE(Python 3.9 64-bit) 三.实验目的和要求:熟练掌握Python序列的应用 四 ...

  10. CF1732A Bestie

    思路 观察数据\(n \le 20\) 直接暴力. 我们直接算所有数的\(GCD\),然后枚举\(1\)~\(n\)的每一个数要不要选,然后选的话,就把原来的\(GCD\)和当前枚举的数\(GCD\) ...