JS + CSS 实现高亮关键词(不侵入DOM)

之前在做关键词检索高亮功能的时候,研究了下目前前端实现高亮的几种方式,第一就是替换dom元素实现高亮,第二就是利用浏览器新特性Css.highlights结合js选区与光标与CSS高亮伪类实现,实现功能如下:

一、页面布局

一个搜索框,其余要检索关键词的文字,并且给搜索框添加change事件
在这里插入图片描述

二、实现选区

利用TreeWalker遍历遍历DOM结构,通过nextNode()方法,拿到所有文本节点数据,保存到数组里,为接下来的搜索做铺垫

let wrap = document.querySelector('.content')// 创建 createTreeWalker 迭代器,用于遍历文本节点,保存到一个数组const treeWalker = document.createTreeWalker(wrap, NodeFilter.SHOW_TEXT);const allTextNodes = [];let currentNode = treeWalker.nextNode();while (currentNode) {allTextNodes.push(currentNode);currentNode = treeWalker.nextNode();}

可以看到,到这一步,拿到所有文本节点数据
在这里插入图片描述
接下来,我们根据搜索的结果,拿到匹配到的dom节点内容的位置信息这里处理下英文小写,这里要注意,可能每句话会出现多次关键词,这里的indexOf要拼开始检索的参数,开始检索的参数这里记录下,也就是上一个检索关键词的结尾

let search = document.getElementById('search')search.onchange = event => {let value = event.target.value // 获取关键词let indices = []; // 位置信息const ranges = allTextNodes.map((el) => {// 英文全部小写return { el, text: el.textContent.toLowerCase() };}).map(({ text, el }) => {// 拿到匹配到dom节点的位置信息,并且保存为数组while (startPos < text.length) {let startPos = 0while (startPos < text.length) {const index = text.indexOf(value, startPos);if (index === -1) breakindices.push({el,start: index,end: index + value.length});startPos = index + value.length;}} });
}

我们可以看下位置信息结果
在这里插入图片描述
接下来,创建选区,进行高亮,这里用到了Highlight,用法如下:Highlight(range1, range2, range3)

// 根据搜索词的位置创建选区
let result = indices.map(item => {let range = new Range();range.setStart(item.el, item.start);range.setEnd(item.el, item.end);return range
});// 创建高亮对象
const searchResultsHighlight = new Highlight(...result);// 注册高亮
CSS.highlights.set("search-results", searchResultsHighlight);

添加css highlight样式:

.content .item::highlight(search-results) {background-color: #ffff00;color: #000;
}

可以看下效果,基本成型,但是当我们切换的时候,上一次的检索结果还在,需要清除高亮记录

// 清除上个高亮
CSS.highlights.clear();

在这里插入图片描述

三、完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS高亮</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 100vw;height: 100vh;padding-top: 20px;}.search {width: 100%;padding: 10px 0;display: flex;align-items: center;justify-content: center;}.search input {width: 500px;height: 35px;border: 1px #999 solid;outline: 0;background-color: #fff;border-radius: 3px;padding-left: 10px;}.content {width: 100%;padding: 30px;}.content .item {width: 100%;font-size: 16px;color: #000;margin-bottom: 10px;line-height: 30px;user-select: none;letter-spacing: 0.5px;}.content .item::highlight(search-results) {background-color: #ffff00;color: #000;}</style>
</head>
<body>
<div class="container"><div class="search"><input id="search" type="text" placeholder="输入关键词检索" /></div><div class="content"><div class="item">1、朱自清《荷塘月色》片段路上只我一个人,背着手踱着。这一片天地好像是我的;我也像超出了平常旳自己,到了另一世界里。我爱热闹,也爱冷静;爱群居,也爱独处。像今晚上,一个人在这苍茫旳月下,什么都可以想,什么都可以不想,便觉是个自由的人。白天里一定要做的事,一定要说的话,现在都可不理。这是独处的妙处,我且受用这无边的荷香月色好了。曲曲折折的荷塘上面,弥望旳是田田的叶子。叶子出水很高,像亭亭旳舞女旳裙。层层的叶子中间,零星地点缀着些白花,有袅娜(niǎo,nuó)地开着旳,有羞涩地打着朵儿旳;正如一粒粒的明珠,又如碧天里的星星,又如刚出浴的美人。微风过处,送来缕缕清香,仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动,像闪电般,霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着,这便宛然有了一道凝碧的波痕。叶子底下是脉脉()的流水,遮住了,不能见一些颜色;而叶子却更见风致了。月光如流水一般,静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样;又像笼着轻纱的梦。虽然是满月,天上却有一层淡淡的云,所以不能朗照;但我以为这恰是到了好处——酣眠固不可少,小睡也别有风味的。月光是隔了树照过来的,高处丛生的灌木,落下参差的斑驳的黑影,峭楞楞如鬼一般;弯弯的杨柳的稀疏的倩影,却又像是画在荷叶上。塘中的月色并不均匀;但光与影有着和谐的旋律,如梵婀(ē)(英语violin小提琴的译音)上奏着的名曲。荷塘的四面,远远近近,高高低低都是树,而杨柳最多。这些树将一片荷塘重重围住;只在小路一旁,漏着几段空隙,像是特为月光留下的。树色一例是阴阴的,乍看像一团烟雾;但杨柳的丰姿,便在烟雾里也辨得出。树梢上隐隐约约的是一带远山,只有些大意罢了。树缝里也漏着一两点路灯光,没精打采的,是渴睡人的眼。这时候最热闹的,要数树上的蝉声与水里的蛙声;但热闹是它们的,我什么也没有。</div><div class="item">2、鲁迅《从百草园到三味书屋》片段不必说碧绿的菜畦,光滑的石井栏,高大的皂荚树,紫红的桑椹;也不必说鸣蝉在树叶里长吟,肥胖的黄蜂伏在菜花上,轻捷的叫天子(云雀)忽然从草间直窜向云霄里去了。单是周围的短短的泥墙根一带,就有无限趣味。油蛉在这里低唱,蟋蟀们在这里弹琴。翻开断砖来,有时会遇见蜈蚣;还有斑蝥,倘若用手指按住它的脊梁,便会拍的一声,从后窍喷出一阵烟雾。何首乌藤和木莲藤缠络着,木莲有莲房一般的果实,何首乌有拥肿的根。有人说,何首乌根是有象人形的,吃了便可以成仙,我于是常常拔它起来,牵连不断地拔起来,也曾因此弄坏了泥墙,却从来没有见过有一块根象人样。如果不怕刺,还可以摘到覆盆子,象小珊瑚珠攒成的小球,又酸又甜,色味都比桑椹要好得远。</div><div class="item">3、陈从周《说园》片段园有静观、动观之分,这一点我们在造园之先,首要考虑。何谓静观,就是园中予游者多驻足的观赏点;动观就是要有较长的游览线。二者说来,小园应以静观为主,动观为辅,庭院专主静观。大园则以动观为主,静观为辅。前者如苏州网师园,后者则苏州拙政园差可似之。人们进入网师园宜坐宜留之建筑多,绕池一周,有槛前细数游鱼,有亭中待月迎风,而轩外花影移墙,峰峦当窗,宛然如画,静中生趣。至于拙政园径缘池转,廊引人随,与“日午画船桥下过,衣香人影太匆匆”的瘦西湖相仿佛,妙在移步换影,这是动观。立意在先,文循意出。动静之分,有关园林性质与园林面积大小。象上海正在建造的盆景园,则宜以静观为主,即为一例。中国园林是由建筑、山水、花木等组合而成的一个综合艺术品,富有诗情画意。叠山理水要造成“虽由人作,宛自天开”的境界。山与水的关系究竟如何呢?简言之,模山范水,用局部之景而非缩小(网师园水池仿虎丘白莲池,极妙),处理原则悉符画本。山贵有脉,水贵有源,脉源贯通,全园生动。我曾经用“水随山转,山因水活”与“溪水因山成曲折,山蹊随地作低平”来说明山水之间的关系,也就是从真山真水中所得到的启示。明末清初叠山家张南垣主张用平冈小陂、陵阜陂阪,也就是要使园林山水接近自然。如果我们能初步理解这个道理,就不至于离自然太远,多少能呈现水石交融的美妙境界。</div><div class="item">4、梁实秋《雅舍》片段“雅舍”最宜月夜——地势较高,得月较先。看山头吐月,红盘乍涌,一霎间,清光四射,天空皎洁,四野无声,微闻犬吠,坐客无不悄然!舍前有两株梨树,等到月升中天,清光从树间筛洒而下,地下阴影斑斓,此时尤为幽绝。直到兴阑人散,归房就寝,月光仍然逼进窗来,助我凄凉。细雨蒙蒙之际,“雅舍”亦复有趣。推窗展望,俨然米氏章法,若云若雾,一片弥漫。但若大雨滂沱,我就又惶悚不安了,屋顶浓印到处都有,起初如碗大,俄而扩大如盆,继则滴水乃不绝,终乃屋顶灰泥突然崩裂,如奇葩初绽,砉然一声而泥水下注,此刻满室狼藉,抢救无及。此种经验,已数见不鲜。</div><div class="item">5、冰心《图画》信步走下山门去,何曾想寻幽访胜?转过山坳来,一片青草地,参天的树影无际。树后弯弯的石桥,桥后两个俯蹲在残照里的狮子。回过头来,只一道的断瓦颓垣,剥落的红门,却深深掩闭。原来是故家陵阙!何用来感慨兴亡,且印下一幅图画。半山里,凭高下视,千百的燕子,绕着殿儿飞。城垛般的围墙,白石的甬道,黄绿琉璃瓦的门楼,玲珑剔透。楼前是山上的晚霞鲜红,楼后是天边的平原村树,深蓝浓紫。暮霭里,融合在一起。难道是玉宇琼楼?难道是瑶宫贝阙?何用来搜索诗肠,且印下一幅图画。低头走着,—首诗的断句,忽然浮上脑海来。“四月江南无矮树,人家都在绿阴中。”何用苦忆是谁的著作,何用苦忆这诗的全文。只此已描画尽了山下的人家!</div><div class="item">6、徐志摩《我所知道的康桥》片段康桥的灵性全在一条河上;康河,我敢说是全世界最秀丽的一条水。河的名字是葛兰大(Granta),也有叫康河(Kiver Cam)的,许有上下流的区别,我不甚清楚。河身多的是曲折,上游是有名的拜伦潭——“Byron’s Pool”——当年拜伦常在那里玩的;有一个老村子叫格兰骞斯德,有一个果子园,你可以躺在累累的桃李树荫下吃茶,花果会掉入你的茶杯,小雀子会到你桌上来啄食,那真是别有一番天地。这是上游;下游是从骞斯德顿下去,河面展开,那是春夏间竞舟的场所。上下河分界处有一个坝筑,水流急得很,在星光下听水声,听近村晚钟声,听河畔倦牛刍草声,是我康桥经验中最神秘的一种:大自然的优美、宁静,调谐在这星光与波光的默契中不期然的淹入了你的性灵。</div></div>
</div>
</body>
<script>let wrap = document.querySelector('.content')// 创建 createTreeWalker 迭代器,用于遍历文本节点,保存到一个数组const treeWalker = document.createTreeWalker(wrap, NodeFilter.SHOW_TEXT);const allTextNodes = [];let currentNode = treeWalker.nextNode();while (currentNode) {allTextNodes.push(currentNode);currentNode = treeWalker.nextNode();}let search = document.getElementById('search')search.onchange = event => {let value = event.target.value// 清除上个高亮CSS.highlights.clear();if (!value) {return}let indices = [] // 位置信息const ranges = allTextNodes.map((el) => {return { el, text: el.textContent.toLowerCase() };}).map(({ text, el }) => {let startPos = 0while (startPos < text.length) {const index = text.indexOf(value, startPos);if (index === -1) breakindices.push({el,start: index,end: index + value.length});startPos = index + value.length;}});// 根据搜索词的位置创建选区let result = indices.map(item => {let range = new Range();range.setStart(item.el, item.start);range.setEnd(item.el, item.end);return range});// 创建高亮对象const searchResultsHighlight = new Highlight(...result);// 注册高亮CSS.highlights.set("search-results", searchResultsHighlight);}
</script>
</html>
四、总结

以上就是关于 CSS Custom Highlight API 的使用方法:

  • 1. 获取文字节点 createTreeWalker()
  • 2. 创建选区 new Range()
  • 3. 创建高亮 new Highlight()
  • 4. 自定义样式 ::hightlight()**

highlight()自定义样式只兼容以下:

文本颜色 `color`
背景颜色 `background-color`
文本修饰 `text-decoration`
文本阴影 `text-shadow`
文本描边 `-webkit-text-stroke`
文本填充 `-webkit-text-fill-color`

以下是兼容性,比较差,目前谷歌只兼容 Chrome 105 以上

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/591820.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023春季李宏毅机器学习笔记 02 :机器学习基本概念

资料 课程主页&#xff1a;https://speech.ee.ntu.edu.tw/~hylee/ml/2023-spring.phpGithub&#xff1a;https://github.com/Fafa-DL/Lhy_Machine_LearningB站课程&#xff1a;https://space.bilibili.com/253734135/channel/collectiondetail?sid2014800 一、機器學習基本原理…

Resource Autowire

Resource注入 Java自带的注解&#xff0c;javax.annotation.resource,Spring支持该注解默认按照byName注入方式&#xff0c;通过反射机制自动注入的策略装配策略&#xff1a; ①如果同时指定了name和type&#xff0c;则从Spring上下文中找到唯一匹配的bean进行装配&#xff0c…

位乘积计数-蓝桥

题目链接&#xff1a;1.位乘积计数 - 蓝桥云课 (lanqiao.cn) 解题思路&#xff1a;10的5次数量级暴力居然过了&#xff0c;看来测试样例很水&#xff0c;直接1遍历到n&#xff0c;再用一个循环判断每位数相乘乘机是否等于m即可。 下面是c代码&#xff1a; #include <iost…

叫板GPT-4的Gemini,我做了一个聊天网页,可图片输入,附教程

先看效果&#xff1a; 简介 Gemini 是谷歌研发的最新一代大语言模型&#xff0c;目前有三个版本&#xff0c;被称为中杯、大杯、超大杯&#xff0c;Gemini Ultra 号称可与GPT-4一较高低&#xff1a; Gemini Nano(预览访问) 为设备端体验而构建的最高效模型,支持离线使用场景。…

什么是数据结构?

1、一种非常经典的数据结构。 栈数据结构&#xff1a;stack 2、什么是数据结构&#xff1f; 数据结构通常是&#xff1a;存储数据的容器。而该容器可能存在不同的结构。 数据结构和 java 语言实际上是没有关系&#xff0c;数据结构是一门独立的学科。 在大学计算机专业中&#…

[Redis实战]分布式锁

四、分布式锁 4.1 基本原理和实现方式对比 分布式锁&#xff1a;满足分布式系统或集群模式下多进程可见并且互斥的锁。 分布式锁的核心思想就是让大家都使用同一把锁&#xff0c;只要大家使用的是同一把锁&#xff0c;那么我们就能锁住线程&#xff0c;不让线程进行&#xf…

Rust赋值语句和数字类型

赋值语句 在Rust中&#xff0c;使用let关键字定义变量。格式是let 变量名:变量类型 变量值;&#xff0c;下边是个例子&#xff1a; let age:i32 18;这就是定义一个有符号32位的数字变量age&#xff0c;而其中的值是18。 而在C语言定义变量的语句格式是类型 变量名 变量值。…

【网络技术】【Kali Linux】Wireshark嗅探(三)用户数据报(UDP)协议

一、实验目的 本次实验使用wireshark流量分析工具进行网络嗅探&#xff0c;旨在了解UDP协议的报文格式。 二、网络环境设置 本次实验使用Kali Linux虚拟机完成&#xff0c;主机操作系统为Windows 11&#xff0c;虚拟化平台选择Oracle VM VirtualBox&#xff0c;组网模式选择…

我与VR的再拜之交

我接触VR比较早。 记得早在2001年左右&#xff0c;瑞典的一家公司&#xff0c;借与上海市政府互访之际&#xff0c;提出与上海市政府在虚拟现实领域的合作。后来上海市政府邀请了上海的几家大型国企&#xff0c;包括汽车、船舶、飞机等&#xff0c;去讨论此事&#xff0c;我作…

electron使用webview出现空白页面解决办法

在使用webview标签的时候&#xff0c;出现了空白页面的情况&#xff0c;刚开始以为没有生效&#xff0c;后来发现页面上是有这个标签的&#xff0c;但是没有展示出内容&#xff0c;后来看了官网&#xff0c;默认情况下&#xff0c;webview标签在 Electron > 5 中被禁用。 &l…

pytorch机器学习各种激活函数总结(不完整学习更新中~)

pytorch各种激活函数总结 0.思维导图预览1. ReLU函数2. Sigmoid函数3. Softmax函数4. Tanh函数5.&#xff08;学习后更新&#xff09; 0.思维导图预览 1. ReLU函数 ReLU&#xff08;Rectified Linear Unit&#xff09;线性整流函数 其公式为&#xff1a; f ( x ) M a x ( 0 …

[python] 基于Dataset库操作数据库

dataset库是Python中一个用于操作数据库的简单库&#xff0c;它提供了一种简洁的方式与各种关系型数据库进行交互&#xff0c;例如SQLite、MySQL、PostgreSQL 等。你可以使用dataset库来执行查询、插入、更新和删除操作&#xff0c;而无需编写复杂的SQL语句。dataset库适用于小…

传感器原理与应用复习--具体场景的应用

文章目录 测量转速测量厚度测量加速度测量液体压强测量含水量测量温度测量流速 测量转速 磁电感应传感器 霍尔传感器 测量厚度 电涡流传感器 测量加速度 应变式传感器 差动变压器式传感器 测量液体压强 电感传感器 电容传感器 测量含水量 半导体传感器 微波传感器…

Prototype原型模式(对象创建)

原型模式&#xff1a;Prototype 链接&#xff1a;原型模式实例代码 注解 模式定义 使用原型实例指定创建对象的种类&#xff0c;然后通过拷贝这些原型来创建新的对象。 ——《设计模式》GoF 目的 在软件系统中&#xff0c;经常面临这“某些结构复杂的对象”的创建工作&am…

Redis的集群模式:主从 哨兵 分片集群

基于Redis集群解决单机Redis存在的问题&#xff0c;在之前学Redis一直都是单节点部署 单机或单节点Redis存在的四大问题&#xff1a; 数据丢失问题&#xff1a;Redis是内存存储&#xff0c;服务重启可能会丢失数据 > 利用Redis数据持久化的功能将数据写入磁盘并发能力问题…

基于YOLOv8的目标跟踪技术

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文摘要&#xff1a;介绍了YOLOv8自带的目标跟踪技术以及评价指标&#xff0c;并教会你如何在YOLOv8使用 1.YOLOv8自带两种跟踪方法 ultralytics/cfg/trackers/文件夹下 1.1 ByteTrack介绍 https://arxiv.org/pdf/2110.06864.pdf 摘…

【华为OD】人工智能面试题目

题目如下&#xff1a; 解释什么是人工智能&#xff1f;描述一下你使用过的机器学习库或框架&#xff0c;以及它的主要功能和特点。什么是过拟合和欠拟合&#xff1f;如何避免它们&#xff1f;解释一下决策树、随机森林和梯度提升机等监督学习算法的基本原理。什么是神经网络&a…

Python爬虫---selenium基本使用(支持无界面浏览器PhantomJS和Chrome handless)

为什么使用selenium&#xff1f; 使用urllib.request.urlopen()模拟浏览器有时候获取不到数据,所以使用selenium (1) selenium是一个用于web应用程序测试的工具 (2) selenium 测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样 (3) 支持通过各种driver (FirfoxDri…

2401编辑器,好插件

原文 CScintillaCtrl,CScintillaView和CScintillaDocv1.82 Scintilla编辑控件的免费MFC和ATL/WTL包装类 这些类为Scintilla编辑控件(http://www.scintilla.org)提供MFC和ATL/WTL包装.此控件提供开源跨平台编辑控件. 部分功能包括语法高亮,调用提示,括号高亮,风格,边距和标记等…

NFS客户端挂载目录后无权限nfsnobody问题

# vim /etc/exports/opt/public 192.168.1.104(rw,sync,anonuid2019,anongid2019)如果使用 anonuid &#xff0c;则客户端需要授权的用户账号的 uid 需要跟 anonuid 一致。 如果使用 anongid &#xff0c;则客户端需要授权的用户账号的 groups 中需要有对应的 gid 。 【关…