JS 搜索定位关键字（Ctrl + F 效果）

最新推荐文章于 2024-06-17 17:23:09 发布
最新推荐文章于 2024-06-17 17:23:09 发布
阅读量1.6w 收藏 3
点赞数
分类专栏： JavaScript Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FOR_CHINA2012/article/details/9328235
版权
这篇博客介绍了如何使用JavaScript模拟浏览器的Ctrl+F功能，包括查找页面、处理空查询条件、开始查询以及查询完毕的提示。目前该功能仅支持IE浏览器。
摘要由CSDN通过智能技术生成

功能类似于浏览器的【Ctrl+F】效果，先看下效果：

1、查找页

2、空查询条件

3、开始查询

4、查询完毕提示

不过需要说明的是，此功能只支持IE，目前尚未找到兼容各浏览器的定位脚本，有需要的同学Copy吧：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<base href="http://192.168.1.3:8088/statute/">
	<base target="_self"/>
	
	<title>JS 搜索定位关键字</titl
最低0.47元/天 解锁文章
码农先生
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
（通用0bug）纯原生实现一个类似浏览器搜索功能(ctrl + f)
06-02 1412
模拟Ctrl + F 的搜索功能，支持自选可搜索区域范围，且支持回车查看下一个，上下查看，自动滚动定位，帮助小白解决不会快捷键操作的搜索。
JS实现页面查找Ctrl+F
12-08
javascript 仿Ctrl+F页面查找功能示例
模拟实现浏览器自带的 ctrl+f 搜索功能
haogemr的博客
07-14 647
方法，把文本替换为带标签的文本，然后就有样式了。下图贴出 主要代码及效果。主要利用的就是元素的。
前端页面模拟浏览器搜索功能Ctrl+F实现
最新发布
SJiuming的博客
06-17 309
对此，营长并不觉得是什么稀奇的事，因为近几年手机市场的厂商们，几乎都在盘算着如何“以貌取胜”，同时，配备让智能手机更智能的 AI 技术也是如今手机的一大卖点。>)', 'ig');
实现一个简单的 ctrl+ f 搜索
weixin_41897680的博客
09-04 3386
实现一个简单的 ctrl+ f 搜索
javascript实现浏览器Ctrl+F页面搜索功能
忆水思寒的博客
08-26 4549
html结构代码 <div> <input id="search" type="text" placeholder="输入当前章节要搜索内容..."/> <span id="search-btn" style="cursor: pointer">搜索</span> </div> <div id="content"> <p>这是要搜索的内容哦！！</p> </div> java
JS模拟浏览器CTRL+F功能
qq_42021843的博客
07-30 2106
<input id="key" placeholder="关键词搜索" class="form-control" type="search"/> <input type="button" class="btn" value="下一个" onclick="next()" /> <input type="button" class="btn" value="上一个" onclick="previous()" /> <span id="searchInfo">&l.
通过关键字定位页面内容，类似于ctrl+f查找功能
u014676576的博客
10-16 6116
这个功能，做的时候，想了很多种办法。     一种是，页面查询的时候，传入要查询的值，调用jQuery的方法，找到后，替换查到的值，加样式。这种方法的弊端就是如果你在属性里面有要搜索的信息，就会替换属性里面的内容，导致内容不准确。如&lt;input sx="xx"/&gt;&lt;label&gt;xx&lt;/label&gt;这个时候，你只想替换&lt;label&gt;标签里面的内容，不...
JS屏幕搜索，实现CTRL + F的效果
Keep It Short And Simple
04-18 3647
JS code如下： var DOM = (document.getElementById) ? 1 : 0; var NS4 = (document.layers) ? 1 : 0; var IE4 = 0; if (document.all) { IE4 = 1; DOM = 0
LevenSearch:Firefox扩展到模糊搜索网页
05-01
它不仅简化了传统Ctrl-F查找的局限，还提升了用户在浏览网页时的搜索效率。对于那些经常处理大量文本信息或者容易犯拼写错误的用户来说，LevenSearch是一个非常实用的工具。同时，其开源的特性也使得开发者能够深入...
基于js实现ctrl+F的页面搜索
07-15
基于js实现ctrl+F的页面搜索，并且有亮色标明搜索的关键词
find5模仿浏览器ctrl+f搜索功能插件
12-21
模仿浏览器ctrl+f 搜索功能插件,本身html无法调用浏览器的查询插件,所以需要使用这个区搜索,引入就可以使用,如果需要修改样式,可以在create_div方法修改
chrome调试&代码逆向分析.docx
10-11
使用**Ctrl + Shift + F**进行全局搜索，可以快速定位到相关代码位置。 - 通过特征关键字或特征DOM片段进行查找：比如“保存失败，请重试”的提示信息。同样使用**Ctrl + Shift + F**进行全局搜索，并为查找到的...
Sublime Text3快捷键
07-19
1. **Ctrl+F** 和 **Ctrl+Shift+F**：分别在当前文件和指定文件夹内搜索关键字。后者支持多个文件夹搜索，适用于跨文件搜索。 2. **Ctrl+P**：打开文件搜索框，可以通过输入文件名、函数名、行号等方式快速定位到...
图库新版jQuery焦点图 JS代码
06-05
tips[36] = '所谓“网站定位”就是实事求是的基于各种现状总结出一个对内容建设、功能规划、服务运营有帮助的指导纲领。'; tips[37] = '不要相信“天下设计一大抄”我们可以借鉴，但绝不能抄袭！'; tips[38] = '学...
简单js模仿浏览器crtl+f功能
编程不过是一门失传艺术的别名，这门艺术的名字叫做“思考”
01-22 2047
由于crtl+f在某些浏览器中并不是十分好用（比如查找一些特殊字符串），就用js简单的写了一个例子模仿crtl+f，实现输入内容点击查找，高亮标注匹配值，并跳到第一个高亮值处，点击下一个跳到第二个高亮值处...。 前端代码如下： &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type"...
如何用js实现浏览器ctrl+f的查找功能
09-24
### 回答1： 可以使用 `window.find()` 方法来实现浏览器中的 Ctrl + F 功能。此方法接受一个参数作为要查找的文本，可以在页面中查找匹配的文本内容。 示例代码如下： ```javascript function findText() { var text = prompt("请输入要查找的文本"); if (text) { if (window.find(text)) { window.getSelection().collapseToEnd(); } else { alert("未找到匹配的文本"); } } } ``` 在此代码中，我们首先使用 `prompt()` 方法获取用户输入的要查找的文本。然后使用 `window.find()` 方法查找匹配的文本，如果找到了则将光标移到匹配文本的末尾，如果没有找到则弹出提示框。最后，我们可以将该方法绑定到某个按钮或者快捷键上，以实现类似浏览器 Ctrl + F 的查找功能。 ### 回答2： 要实现浏览器的Ctrl+F查找功能，可以使用JavaScript来操作浏览器的DOM（文档对象模型）。以下是实现该功能的步骤： 1. 监听用户按下Ctrl键和F键的事件。可以使用keydown或keyup事件来监听键盘按键。 ```javascript document.addEventListener('keydown', function(event) { if(event.ctrlKey && event.key === 'f') { // 在这里编写查找逻辑 } }); ``` 2. 创建一个输入框用于接收用户输入的查找关键字。可以使用document.createElement方法来创建该输入框，并设置其属性和样式。 ```javascript var searchInput = document.createElement('input'); searchInput.type = 'text'; searchInput.placeholder = '在页面中查找...'; searchInput.style.position = 'fixed'; searchInput.style.top = '20px'; searchInput.style.right = '20px'; searchInput.style.zIndex = '9999'; ``` 3. 在用户按下Ctrl+F时，在页面上显示创建的查找输入框，并将焦点设置在输入框上。 ```javascript document.addEventListener('keydown', function(event) { if(event.ctrlKey && event.key === 'f') { document.body.appendChild(searchInput); searchInput.focus(); } }); ``` 4. 监听输入框的输入事件，获取用户输入的查找关键字，并在页面中查找匹配的内容。 ```javascript searchInput.addEventListener('input', function() { var keyword = searchInput.value; var matches = window.find(keyword); // 处理匹配结果 }); ``` 5. 在处理匹配结果时，可以根据需要选择不同的方式来提示用户查找结果，例如可以将匹配的内容高亮显示或者在页面上显示查找结果的数量。 6. 当用户按下ESC键或者点击其他地方时，隐藏查找输入框并清除用户输入的查找关键字。 ```javascript document.addEventListener('keydown', function(event) { if(event.key === 'Escape') { clearSearch(); } }); document.addEventListener('click', function(event) { if(event.target !== searchInput) { clearSearch(); } }); function clearSearch() { document.body.removeChild(searchInput); searchInput.value = ''; } ``` 通过以上步骤，我们可以实现浏览器的Ctrl+F查找功能，让用户在页面中方便地查找关键字并高亮显示匹配的内容。 ### 回答3： 要实现浏览器的Ctrl + F查找功能，可以使用JavaScript来完成。以下是实现的步骤： 1. 监听键盘事件：使用addEventListener()函数在文档上添加一个键盘事件侦听器，以监听用户按下的按键事件。 2. 检测Ctrl + F组合键：在键盘事件侦听器中，检查event对象中的keyCode属性和ctrlKey属性，判断是否同时按下了Ctrl和F键。 3. 创建查找输入框：在页面上动态创建一个输入框元素，用于用户输入要查找的内容。 4. 获取输入内容：当用户输入完要查找的内容后，监听输入框的input事件，实时获取用户输入的内容。 5. 查找匹配文本：使用JavaScript的find()或者indexOf()等方法，在页面中查找匹配的文本。 6. 高亮匹配内容：找到匹配的文本后，可以使用addClass()函数为匹配的文本添加一个高亮样式，以提供可视化效果。 7. 清除高亮：当用户清除输入框的内容时，需要清除之前添加的高亮样式，保持页面的整洁。 8. 取消查找：如果用户关闭查找输入框或者按下Esc键，则取消查找功能，隐藏输入框和清除高亮样式。 以上是用JavaScript实现浏览器Ctrl + F查找功能的简单步骤。具体实现时，可以根据实际需求进行调整和优化。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值