前端页面模拟浏览器搜索功能Ctrl+F实现

最新推荐文章于 2023-08-27 12:37:34 发布

原创

最新推荐文章于 2023-08-27 12:37:34 发布 · 1w 阅读

27 ·

CC 4.0 BY-SA版权

本文介绍了如何在前端页面中模拟浏览器的搜索功能，通过搜索功能实现流程图详细解析操作步骤。作者强调文章为个人知识整理，可能存在错误和不足，期待读者的指正。同时，作者提供微信联系方式，欢迎技术交流与探讨。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

<html>
<head>
    <style type="text/css">
        .res
        {
   
   
            color: Red;
        }
		.result{
   
   
			background: yellow;
		}
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var oldKey = "";
        var index = -1;
        var pos = new Array();//用于记录每个关键词的位置，以方便跳转
        var oldCount = 0;//记录搜索到的所有关键词总数
		
		function previous(){
   
   
			index--;
            index = index < 0 ? oldCount - 1 : index;
			search();
		}
		function next(){
   
   
			index++;
            //index = index == oldCount ? 0 : index;
			if(index==oldCount){
   
   
				index = 0 ;
			}
			search();
		}
 
        function search() {
   
   
            $(".result").removeClass("res");//去除原本的res样式
            var key = $("#key").val(); //取key值
            if (!key) {
   
   
				console.log("key为空则退出");
				$(".result").each(function () {
   
   //恢复原始数据
                    $(this).r