（通用0bug）纯原生实现一个类似浏览器搜索功能(ctrl + f)

已于 2024-07-02 11:47:00 修改
阅读量1.3k 收藏 8
点赞数 5
分类专栏： 工具类 react vue 文章标签： ctrl + F 全局搜索组件
于 2023-06-02 16:27:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gas_station/article/details/131007072
版权

如果可以实现记得点赞分享，谢谢老铁～

先看下效果图

在这里插入图片描述

一、问题的描述

由于公司业务需要在搜索框中，
模拟 Ctrl + F 的搜索功能，支持自选可搜索区域范围，
且支持回车查看下一个，上下查看，自动滚动定位，
帮助小白解决不会快捷键操作的搜索。

二、问题的解决方案

首先查看浏览器自带的 api 啥的,抱歉，没有，找不到~

三、先看下原来网站的效果

将原网站下载下来的脚本命名为 find5.js
直接引入，即可得到下面的搜索框效果

<script type="text/javascript" language="JavaScript" src="find5.js"></script>

在这里插入图片描述

基于一个网站，具体参考网址是:
链接: <

最低0.47元/天 解锁文章
前端加油站
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 15
    评论
专栏目录
ie 处理 gif动画 的onload 事件的一个 bug
10-30
IE浏览器在处理GIF动画的onload事件时存在的一个bug，该bug会导致onload事件重复触发，该问题只出现在IE浏览器上，而Firefox浏览器没有这个问题。 该bug的原因是IE浏览器在处理GIF动画时，会重复触发onload事件，这...
JS模拟浏览器实现全局搜索功能
11-30
需要像浏览器的全局搜索一样，搜索指定模块的对应值，然后将匹配到的内容添加背景颜色等。 思路 需要取到当前指定区域的所有内容 然后在取到的内容中找到搜索的内容加上对应的背景颜色 最后在将修改后的内容渲染到页面上 实现 利用innerHTML取到对应模块的内容 编写对应的正则表达式来匹配搜索的内容 利用String.prototype.replace替换匹配到的内容 最后在渲染到页面上 代码实现： let wrap = document.querySelector('.wrap'); let innerHTML = wrap[removed]; let reg
vue 实现Ctrl+F搜索功能（定位+滚动的效果）（解决掉能搜查标签属性）
weixin_44863580的博客
04-26 4159
vue 实现Ctrl+F搜索功能（解决掉能搜查标签属性）不兼容IE 1、先看效果 2、搜索栏代码 <el-input v-model="searchText" placeholder="请输入关键字" prefix-icon="el-icon-search" clearable size="small" @keyup.enter.native="searc
前端页面模拟浏览器搜索功能Ctrl+F实现
最新发布
SJiuming的博客
06-17 270
对此，营长并不觉得是什么稀奇的事，因为近几年手机市场的厂商们，几乎都在盘算着如何“以貌取胜”，同时，配备让智能手机更智能的 AI 技术也是如今手机的一大卖点。>)', 'ig');
javascript实现浏览器Ctrl+F页面搜索功能
weixin_33978016的博客
03-25 3293
html结构代码 <div> <input id="search" type="text" placeholder="输入当前章节要搜索内容..."/> <span id="search-btn" style="cursor: pointer">搜索</span> </...
实现一个简单的 ctrl+ f 搜索
weixin_41897680的博客
09-04 3330
实现一个简单的 ctrl+ f 搜索
前端实现ctrl+F搜索效果
usernotdefined的博客
01-26 2077
原理 根据搜索关键字keyword将原有文本替换成高亮highlight样式的标签。 找出全部带有高亮highlight样式的标签作为keywordNodes高亮关键字dom节点数组。 currentActiveNodeIndex记录当前激活的关键字节点，点击上一条或下一条对激活的索引currentActiveNodeIndex进行操作。同时记得为激活的节点添加选中的样式。web利用scrollIntoView()滚动至可视窗口，小程序利用wx.pageScrollTo() web案例 源码 &l
想造轮子的时候，ctrl+f一下
diandinai8712的博客
07-04 250
Chardet，字符编码探测器，可以自动检测文本、网页、xml的编码。 colorama，主要用来给文本添加各种颜色，并且非常简单易用。 Prettytable，主要用于在终端或浏览器端构建格式化的输出。 difflib，[Python]标准库，计算文本差异 Levenshtein，快速计算字符串相似度。 fuzzywuzzy,字符串模糊匹配。 esmre,正则表达式的加...
java基础巩固-宇宙第一AiYWM：为了维持生计，手写RPC~Version07（RPC原理、序列化框架们、网络协议框架们 、RPC 能帮助我们做什么呢、RPC异常排查：ctrl+F搜超时）整起
https://aiminminai.gitee.io/aiminminai/
06-02 949
java基础巩固-宇宙第一AiYWM：为了维持生计，手写RPC~Version07（RPC的序列化框架们、网络协议框架们）整起
python原生爬虫+scrapy+redis分布式
zlc1990628的博客
04-20 1958
数据获取途径注意：robots.txt1、浏览器版Chrome2、手机版Chrome3、合作网站（猪队友网站）、子网站   请求方式requests.get(url,headers = headers,verify=False,proxies = proxies);requests.post(url,data=data,headers = headers,verify=False,proxies ...
js-icookie:一个用来在浏览器（IE9+）中操作cookieJavaScript Api
04-28
一个用来在浏览器（IE9+）中操作cookieJavaScript Api； 还未经严密测试，发现bug请及时联系 安装 用script标签引入 下载并引入: [removed][removed] NPM $ npm i js-icookie -S 基本用法 全局配置 按照代码执行...
用 js + html 实现一个网页版日历
07-02
使用js + html 实现的简单的网页版日历，顶部默认会显示当前日期和时间，时间会精确到秒...当日会用黄色背景标识，用大家常用的js函数实现主要功能，核心代码量不足100行，代码运行正常，无明显bug，实现起来非常简单。
XIL:使用ILRuntime实现的类似XLUA功能的Unity3D下热修复BUG的解决方案
05-12
使用ILRuntime实现的类似XLUA功能的Unity3D下热修复BUG的解决方案 公司项目已经使用此插件上线，由腾讯运营，上线运营情况良好，插件自身目前暂未发现BUG! 下图为Demo截图 请使用Unity2019.2.17f1版本打开，其他版本...
ctrl+空格切换输入法，修改winxp的bug
06-24
ctrl+空格切换输入法，修改winxp的bug，操作方便，绝对可行，本人也是因为切换了以后无法切换回来，无奈之下，写的这个程序，界面很垃圾，但是操作很方便 ctrl+空格切换输入法，修改winxp的bug，操作方便，绝对可行...
在vue项目中做一个类ctrl+f的搜索功能
Isaac_Play的博客
02-26 1813
这次在项目中遇到了一个要做一个搜索功能，因为项目是vue的，而且是在手机端，所以对这个搜索功能的实现和能做到什么样子都没有底，在网上研究了一会，发现大家的解决方法都各有特色，有引入第三方包的，有遍历的，确实都可以实现，但我觉得在vue中这样的方法也太过繁琐了，于是经过一段时间的查询与思索后我自己写了个简单的方法，并记录下自己思索的过程 第一步 明确寻求 产品的一万种奇怪要求 对于开发来说，应该要...
vue (iview)根据权限控制columns 的某列显示与隐藏（通用）
07-14 9880
1.需求描述 根据权限控制某列中显示与隐藏 2.使用场景 根据不同用户（普通用户，vip用户），展示对应的列 3.解决思路 将原来的columns copy一份，然后根据权限去让它过滤对应的列，就能返回最新的columns了 举个例子，代码如下 created() { userType(type) { // type: 1 普通用户 2 vip用户 如...
Vue开发中regeneratorRuntime is not defined
07-18 7446
1.需求描述 想先让其他异步接口发送请求响应后，再发送详情接口，以便于正常渲染页面 2.使用场景 在vue项目中使用 async await处理并行多个异步,是因为项目中没有使用transform-runtime将es6+转换成es5 3.解决思路 注意：不建议使用babel-polyfill，因为这个太大了，现在6.0版本的babel改成了插件的形式，现在推荐的是transform...
vue iview-admin 如何兼容IE浏览器（通用）
12-29 4480
1. 安装babel-polyfill `yarn add babel-polyfill --save` 2. src/main.js 引入babel-polyfill `import '@babel/polyfill` 3. 在根目录增加babel.config.js文件 ``` module.exports = { presets: [ ['@v...
帮我写一个JS原生实现穿梭框能够左右来回穿梭无bug
06-06
好的，下面是一个完整的JS原生实现穿梭框能够左右来回穿梭无bug的代码： HTML部分： ``` <div> <select id="left" multiple> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> </select> <button id="leftToRight">></button> <button id="rightToLeft"><</button> <select id="right" multiple> </select> </div> ``` JS部分： ``` var leftSelect = document.getElementById("left"); var rightSelect = document.getElementById("right"); var leftToRightBtn = document.getElementById("leftToRight"); var rightToLeftBtn = document.getElementById("rightToLeft"); leftToRightBtn.addEventListener("click", function() { for (var i = 0; i < leftSelect.options.length; i++) { var option = leftSelect.options[i]; if (option.selected) { rightSelect.appendChild(option); i--; } } }); rightToLeftBtn.addEventListener("click", function() { for (var i = 0; i < rightSelect.options.length; i++) { var option = rightSelect.options[i]; if (option.selected) { leftSelect.appendChild(option); i--; } } }); ``` 这段代码实现了将左侧的选项移动到右侧或者将右侧的选项移回到左侧。其中，左右两个select元素都设置了multiple属性，表示可以多选。通过循环遍历左侧和右侧的选项，判断是否被选中，从而实现移动。由于在移动过程中会改变options的长度，因此需要在移动完成后将变量i减1，以防止漏掉某些选项。这样就可以实现一个简单的穿梭框了，而且没有bug。
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端加油站

你遇到的坑将由我来踩

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值