当前位置: 首页 > news >正文

两种使用 JavaScript 实现网页高亮关键字的方法

随着各种类型的信息源变得越来越多,我们常常需要通过搜索引擎来找到自己需要的信息。在搜索结果中,通常会高亮显示与我们搜索的关键词相关的内容,这样我们就能更快地找到自己需要的信息。

在本文中,我们将探讨如何使用 JavaScript 实现网页高亮显示关键字的功能。我们将介绍两种方法:基于浏览器 API 的方法和基于第三方库的方法。我们还将讨论如何在不破坏网页布局的情况下正确地高亮显示文本内容。

基于浏览器 API 的方法

JavaScript 中的浏览器 API 允许我们选择文本并将其高亮显示。其中最常用的 API 是 document.getSelection()Range 对象。

如果我们有一个包含文本内容的 HTML 元素,例如 <div>,我们可以使用 document.getSelection() 方法来获取用户在页面上选择的文本。该方法返回一个 Selection 对象,它代表当前选择的文本范围。我们可以使用 getRangeAt() 方法从 Selection 对象中获取一个包含在选中文本范围内的 Range 对象。

一旦我们有了 Range 对象,就可以使用 document.createElement() 方法创建一个新的 HTML 元素,并使用该元素覆盖选中文本的范围。在新元素中应用 CSS 样式以高亮显示文本。

以下是一个示例代码:

function highlightText() { var selection = document.getSelection(); var range = selection.getRangeAt(0); var newNode = document.createElement("span"); newNode.setAttribute("class", "highlight"); range.surroundContents(newNode); }

在这个例子中,我们使用 document.createElement() 方法创建了一个新的 span 元素,并为其设置了 highlight 类。然后,我们使用 Range 对象的 surroundContents() 方法将选中的文本包含在新的 span 元素中。

基于第三方库的方法

尽管使用 JavaScript 可以实现网页高亮关键字的功能,但要自己编写 JavaScript 代码可能会比较繁琐,而且需要涉及到 DOM 操作和样式设置等技术细节。因此,许多流行的 JavaScript 库(如 jQuery 和 Highlight.js)提供了可重用的代码,可以帮助快速实现这种功能。

例如,使用 jQuery 库,我们可以使用以下代码在页面中查找所有与关键字匹配的文本并将其高亮显示:

function highlightText(keyword) { $('body').highlight(keyword); }

这个函数会在页面主体中查找所有包含给定关键字的文本,并使用 jQuery 插件 highlight 将其高亮显示。

使用 Highlight.js 库时,我们可以使用以下代码:

function highlightText() { hljs.initHighlightingOnLoad(); }

这个函数会加载 Highlight.js 库,并在页面加载后自动高亮显示所有具有 hljs 类的代码块。

如何正确地高亮显示文本

无论使用哪种方法,网页高亮关键字的功能都存在一个共同的问题:如果不小心处理,容易破坏网页布局。例如,如果直接覆盖选定文本的范围,则可能影响相邻的标签或其他文本。因此,在实现高亮显示功能时,我们需要遵循一些最佳实践:

  1. 使用 CSS 样式来高亮显示文本。在选择要高亮显示的元素时,使用 span 元素而不是 div 元素,以避免破坏页面布局。可以使用 CSS 样式设置 span 元素的样式。

  2. 遵循可访问性标准。使用高亮显示功能时,应该提供一些方式来让用户更好地了解哪些文本被高亮显示了,比如添加 ARIA 属性或设置透明度。

  3. 避免多次高亮显示。如果用户进行了多次搜索,可能会导致同一个文本被多次高亮显示。为了避免这种情况,我们需要在高亮显示新文本之前先删除旧文本的高亮显示。

结语

在本文中,我们介绍了两种使用 JavaScript 实现网页高亮关键字的方法:基于浏览器 API 的方法和基于第三方库的方法。无论使用哪种方法,都要遵循最佳实践,以避免破坏页面布局或造成其他不良后果。

相关文章:

两种使用 JavaScript 实现网页高亮关键字的方法

随着各种类型的信息源变得越来越多&#xff0c;我们常常需要通过搜索引擎来找到自己需要的信息。在搜索结果中&#xff0c;通常会高亮显示与我们搜索的关键词相关的内容&#xff0c;这样我们就能更快地找到自己需要的信息。 在本文中&#xff0c;我们将探讨如何使用 JavaScrip…...

【SpringBoot】SpringBoot集成ElasticSearch

文章目录 第一步&#xff0c;导入jar包&#xff0c;注意这里的jar包版本可能和你导入的不一致&#xff0c;所以需要修改第二步&#xff0c;编写配置类第三步&#xff0c;填写yml第四步&#xff0c;编写util类第五步&#xff0c;编写controller类第六步&#xff0c;测试即可 第一…...

从 Elasticsearch 到 Apache Doris,10 倍性价比的新一代日志存储分析平台

作者介绍&#xff1a;肖康&#xff0c;SelectDB 技术副总裁 导语 日志数据的处理与分析是最典型的大数据分析场景之一&#xff0c;过去业内以 Elasticsearch 和 Grafana Loki 为代表的两类架构难以同时兼顾高吞吐实时写入、低成本海量存储、实时文本检索的需求。Apache Doris…...

探讨Redis缓存问题及解决方案:缓存穿透、缓存击穿、缓存雪崩与缓存预热(如何解决Redis缓存中的常见问题并提高应用性能)

Redis是一种非常流行的开源缓存系统&#xff0c;用于缓存数据以提高应用程序性能。但是&#xff0c;如果我们不注意一些缓存问题&#xff0c;Redis也可能会导致一些性能问题。在本文中&#xff0c;我们将探讨Redis中的一些常见缓存问题&#xff0c;并提供解决方案。 一、缓存穿…...

【Python】怎么在pip下载的时候设置镜像?(常见的清华镜像、阿里云镜像以及中科大镜像)

一、清华镜像 在使用 pip 命令下载 Python 包时&#xff0c;可以通过设置 pip 的镜像源为清华镜像来加快下载速度。 以下是如何设置清华镜像源的步骤&#xff1a; 打开终端或命令行窗口执行以下命令添加清华镜像源&#xff1a; pip config set global.index-url https://py…...

【AI面试】目标检测中one-stage、two-stage算法的内容和优缺点对比汇总

在深度学习领域中&#xff0c;图像分类&#xff0c;目标检测和目标分割是三个相对来说较为基础的任务了。再加上图像生成&#xff08;GAN&#xff0c;VAE&#xff0c;扩散模型&#xff09;&#xff0c;keypoints关键点检测等等&#xff0c;基本上涵盖了图像领域大部分场景了。 …...

stack、queue和priority_queue的使用介绍--C++

目录 一、stack介绍 使用方法 二、queue介绍 queue的使用 三、priority_queeue 优先级队列介绍 一、stack介绍 1. stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行元素的插入与提取操作。 2. stack是作为容器…...

python遍历数组

在Python中&#xff0c;有多种方式可以遍历数组&#xff0c;以下是其中的几种方式&#xff1a; 1. 使用for循环&#xff1a; my_list [1, 2, 3, 4, 5] for x in my_list: print(x) 2. 使用while循环和索引&#xff1a; my_list [1, 2, 3, 4, 5] i 0 while i < len(m…...

红黑树理论详解与Java实现

文章目录 基本定义五大性质红黑树和2-3-4树的关系红黑树和2-3-4树各结点对应关系添加结点到红黑树注意事项添加的所有情况 添加导致不平衡叔父节点不是红色节点&#xff08;祖父节点为红色&#xff09;添加不平衡LL/RR添加不平衡LR/RL 叔父节点是红色节点&#xff08;祖父节点为…...

container的讲解

我们做开发经常会遇到这样的一个需求&#xff0c;要开发一个响应式的网站&#xff0c;但是我们需要我们的元素样式跟随着我们的元素尺寸大小变化而变化。而我们常用的媒体查询&#xff08;Media Queries&#xff09;检测的是视窗的宽高&#xff0c;根本无法满足我们的业务需求&…...

JavaScript 箭头函数

&#xff08;许多人所谓的成熟&#xff0c;不过是被习俗磨去了棱角&#xff0c;变得世故而实际了。那不是成熟&#xff0c;而是精神的早衰和个性的消亡。真正的成熟&#xff0c;应当是独特个性的形成&#xff0c;真实自我的发现&#xff0c;精神上的结果和丰收。——周国平&…...

简单理解Transformer注意力机制

这篇文章是对《动手深度学习》注意力机制部分的简单理解。 生物学中的注意力 生物学上的注意力有两种&#xff0c;一种是无意识的&#xff0c;零一种是有意识的。如下图1&#xff0c;由于红色的杯子比较突出&#xff0c;因此注意力不由自主指向了它。如下图2&#xff0c;由于…...

Vue3面试题:20道含答案和代码示例的练习题

Vue3中响应式数据的实现原理是什么&#xff1f; 答&#xff1a;Vue3中使用Proxy对象来实现响应式数据。当数据发生变化时&#xff0c;Proxy会自动触发更新。 const state {count: 0 }const reactiveState new Proxy(state, {set(target, key, value) {target[key] valueco…...

Oracle数据库创建用户

文章目录 1 查看当前连接的容器2 查看pdb下库的信息3 将连接改到XEPDB1下&#xff0c;并查看当前连接4 创建表空间5 创建用户6 用户赋权7 删除表空间、用户7.1 删除表空间7.2 删除用户 8 CDB与PDB的概念 1 查看当前连接的容器 SQL> show con_name;CON_NAME ---------------…...

互联网摸鱼日报(2023-04-30)

互联网摸鱼日报&#xff08;2023-04-30&#xff09; InfoQ 热门话题 被ChatGPT带火的大模型&#xff0c;如何实际在各行业落地&#xff1f; Service Mesh的未来在于网络 百度 Prometheus 大规模业务监控实战 软件技术栈商品化&#xff1a;应用优先的云服务如何改变游戏规则…...

第二章--第一节--什么是语言生成

一、什么是语言生成 1.1. 说明语言生成的概念及重要性 语言生成是指使用计算机程序来生成符合人类自然语言规范的文本的过程。它是自然语言处理(NLP)领域中的一个重要分支,涉及到语言学、计算机科学和人工智能等领域的交叉应用。语言生成技术可以被广泛地应用于自动问答系…...

HTML <!--...--> 标签

实例 HTML 注释&#xff1a; <!--这是一段注释。注释不会在浏览器中显示。--><p>这是一段普通的段落。</p>浏览器支持 元素ChromeIEFirefoxSafariOpera<!--...-->YesYesYesYesYes 所有浏览器都支持注释标签。 定义和用法 注释标签用于在源代码中…...

TinyML:使用 ChatGPT 和合成数据进行婴儿哭声检测

故事 TinyML 是机器学习的一个领域,专注于将人工智能的力量带给低功耗设备。该技术对于需要实时处理的应用程序特别有用。在机器学习领域,目前在定位和收集数据集方面存在挑战。然而,使用合成数据可以以一种既具有成本效益又具有适应性的方式训练 ML 模型,从而消除了对大量…...

JavaScript中的Concurrency并发:异步操作下的汉堡制作示例

这篇文章想讲一下JavaScript中同步与异步操作在一个简单的示例中的应用。我们将以制作汉堡为例&#xff0c;展示如何使用同步方法、回调函数&#xff08;callbacks&#xff09;和Promise与async/await来实现该过程。 Let’s imagine we’re trying to make a burger: 1. Get …...

微信小程序开发一个多少钱

小程序开发是当前比较流行的一项技术服务&#xff0c;能够为企业和个人带来巨大的商业价值和社会价值&#xff0c;但是小程序开发费用也是潜在的成本之一。在选择小程序开发服务时&#xff0c;了解开发费用如何计算、影响价格的因素以及如何降低成本等方面的知识&#xff0c;可…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...