如何使用Javascript在chrome浏览器上实现类似Ctrl+F的高亮的功能

最新推荐文章于 2023-06-02 16:27:12 发布
最新推荐文章于 2023-06-02 16:27:12 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： JavaScript 小白 编程 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ashu_CSDN/article/details/99678307
版权

如何使用Javascript在chrome浏览器上实现类似Ctrl+F的高亮的功能
首先给图:
在这里插入图片描述
遇到的问题: 如何取得高亮关键字(即被搜索的文字,如:程序)在网页内其所在的标签的索引?
问题详细描述:
如图:
在这里插入图片描述
图中的"程序"在p标签中,我想要做的就是取得"程序"坐在p这个标签的索引,或者如果p标签中有id或者class,取得p标签的id或者class.
最重要的提示:作者小白一个(自学),平常都是看文章,今天迫于无奈,发人生中的第一帖寻求帮助,望大神勿喷.

Ashu_csdn
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 页面内容搜索，类似于 Ctrl+F功能的实现代码
12-12
<html>  <META HTTP-EQUIV=”Content-Type” content=”text/html; charset=gb_2312-80″>  <TITLE>WinWebMail</TITLE>  [removed]  <!–   function doZoom(size){      document.getElementById(‘zoom’).style.fontSize=size+’px’  } var DOM = (document.getElementById) ? 1 : 0;  var NS4 = (document
html选择区域高亮,html 区域内查找,高亮,定位,类似于Ctrl+F
weixin_31485835的博客
06-04 435
//第一个参数是搜索内容输入框,第二个参数是要搜索的范围,第三个参数是,是否搜索下一个varcountIndex=0;functionfindStr(searchInput,serDivID,isNext){searchText=$.trim($(searchInput).val());if(searchText!=null&&searchText!=''){clear...
js模拟浏览器Ctrl+F 搜索高亮
52.0Hz的博客
09-18 6079
js模拟浏览器Ctrl+F 搜索页面内容，并高亮显示.
javascript实现浏览器Ctrl+F页面搜索功能
忆水思寒的博客
08-26 4474
html结构代码 <div> <input id="search" type="text" placeholder="输入当前章节要搜索内容..."/> <span id="search-btn" style="cursor: pointer">搜索</span> </div> <div id="content"> <p>这是要搜索的内容哦！！</p> </div> java
JSP页面 CTRL+F 功能实现
weixin_30849591的博客
07-19 350
--- js 部分 var oldKey = ""; var index = -1; var pos = new Array();//用于记录每个关键词的位置，以方便跳转 var posy = new Array();//用于记录每个关键词的位置，以方便跳转 var oldCount = 0;//记录搜索到的所有关键词总数 function previ...
vue3 实现浏览器ctrl+f功能
qq_43203949的博客
12-12 2880
vue3 实现浏览器ctrl+f功能
模拟浏览器的查找功能(Ctrl+F)，同时兼容IE和Chrome
热门推荐
深蓝色的忧伤
10-30 1万+
通常在做前端Web界面时，经常需要用js模拟浏览器的查找功能。下面介绍下IE和Chrome浏览器中如何用js模拟该功能。 一、IE浏览器 在IE浏览器中我们需要用到TextRange对象，该对象主要用来在IE浏览器中查找文本。 如何创建该对象呢？ 通常如果是在整个页面查找，只需调用方法document.body.createTextRange()即可。而如何是要在某一个对象内查找，例如：tex
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
10-19
在JS（JavaScript）中，我们可以监听键盘和鼠标事件来实现这一目标。 首先，我们需要理解`Ctrl + 鼠标滚轮`缩放网页的工作原理。在大多数现代浏览器中，当用户按下`Ctrl`键并滚动鼠标滚轮时，浏览器会触发一个`...
基于js实现ctrl+F的页面搜索
07-15
基于js实现ctrl+F的页面搜索，并且有亮色标明搜索的关键词
JS实现页面查找Ctrl+F
12-08
javascript 仿Ctrl+F页面查找功能示例
JS模拟浏览器实现全局搜索功能
11-30
需要像浏览器的全局搜索一样，搜索指定模块的对应值，然后将匹配到的内容添加背景颜色等。 思路 需要取到当前指定区域的所有内容 然后在取到的内容中找到搜索的内容加上对应的背景颜色 最后在将修改后的内容渲染到页面上 实现 利用innerHTML取到对应模块的内容 编写对应的正则表达式来匹配搜索的内容 利用String.prototype.replace替换匹配到的内容 最后在渲染到页面上 代码实现： let wrap = document.querySelector('.wrap'); let innerHTML = wrap[removed]; let reg
JS使用Chrome浏览器实现调试线上代码
10-15
**JS使用Chrome浏览器实现调试线上代码** 在前端开发过程中，线上环境出现的bug往往与开发和测试环境有所差异，为了高效地定位并解决问题，使用Chrome浏览器进行线上代码调试显得至关重要。本文将详细介绍如何利用...
disable-scroll-wheel-zoom:Chrome扩展程序禁用了Ctrl +滚轮缩放快捷方式
05-23
标题中的“disable-scroll-wheel-zoom:Chrome扩展程序禁用了Ctrl +滚轮缩放快捷方式”表明我们关注的是一个Chrome浏览器的扩展程序，它的主要功能是阻止用户使用Ctrl键加鼠标滚轮进行页面缩放操作。这个特性可能对于...
chrome-tabs-history:Chrome扩展程序，可让您使用Ctrl + Tab命令切换选项卡
05-25
Chrome标签历史记录扩展Chrome扩展程序保留了打开的标签页的历史记录，并允许用户使用Ctrl + Tab命令在其中浏览。用法由于扩展程序正在开发中，因此尚未执行打包任务。 要在您自己的浏览器中尝试扩展，请执行以下...
js实现仿浏览器Ctrl+F全局模糊搜索并高亮显示
不吃草的程序猿的博客
07-13 1389
话不多说，直接上代码：html： <div class="input-group searchDiv"> <input class="layui-input layui-input-sm layui-inline" type="text" id="keyWord" autocomplete="off" placeholder="请输入搜索内容"> </div> js： <script type=.
（通用0bug）纯原生实现一个类似浏览器搜索功能(ctrl + f)
06-02 1332
模拟Ctrl + F 的搜索功能，支持自选可搜索区域范围，且支持回车查看下一个，上下查看，自动滚动定位，帮助小白解决不会快捷键操作的搜索。
JS实现页面查找功能，类似与Ctrl+F
linrenchao的专栏
04-03 2453
页内查找         //页面查找         var DOM = (document.getElementById) ? 1 : 0;         var NS4 = (document.layers) ? 1 : 0;         var IE4 = 0;         if (document.all) {             IE4 = 1;    
Chrome Snippets 怎么使用
最新发布
06-14
Chrome Snippets是Chrome浏览器内置的代码片段工具，可以帮助我们快速编写和测试JavaScript代码。下面是使用Chrome Snippets的步骤： 1. 打开Chrome浏览器，进入开发者工具界面。你可以通过快捷键`Ctrl + Shift + I`（Windows）或`Command + Option + I`（Mac）打开开发者工具界面。 2. 在开发者工具界面中，切换到`Sources`选项卡。如果你还没有打开开发者工具界面，可以在Chrome菜单中选择`更多工具` -> `开发者工具`打开。 3. 在`Sources`选项卡中，点击左侧面板中的`Snippets`标签页。 4. 点击右侧面板中的`New snippet`按钮，创建一个新的代码片段。 5. 在新建的代码片段中，编写你想要测试的JavaScript代码。 6. 点击`Ctrl + S`（Windows）或`Command + S`（Mac）保存代码片段，或者点击工具栏中的保存按钮。 7. 在代码片段中，右键单击代码区域，选择`Run`或者使用快捷键`Ctrl + Enter`（Windows）或`Command + Enter`（Mac）运行代码。 8. 在代码片段中，右键单击代码区域，选择`Insert into console`或者使用快捷键`Ctrl + Shift + Enter`（Windows）或`Command + Option + Enter`（Mac）将代码插入到控制台中运行。 通过以上步骤，你就可以使用Chrome Snippets快速编写和测试JavaScript代码了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值