模拟浏览器搜索功能(Ctrl + F)

写的匆忙,示意一下,有待完善。把以下代码复制到文本文件中,把文件扩展名改为.html就可以运行了。

<html>
<head>
    <style type="text/css">
        .res
        {
            color: Red;
        }
    </style>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var oldKey = "";
        var index = -1;
        var pos = new Array();
        var oldCount = 0;

        function search(flg) {
            if (!flg) {
                index++;
                index = index == oldCount ? 0 : index;
            }
            else {
                index--;
                index = index < 0 ? oldCount - 1 : index;
            }

            $(".result").removeClass("res");
            $("#toresult").remove();
            var key = $("#key").val(); //取key值
            if (!key) {
                oldKey = "";
                return; //key为空则退出
            }

            if (oldKey != key) {
                //重置
                index = 0;
                $(".result").each(function () {
                    $(this).replaceWith($(this).html());
                });
                pos = new Array();

                $("body").html($("body").html().replace(new RegExp(key, "gm"), "<span id=‘result" + index + "‘ class=‘result‘>" + key + "</span>")); // 替换

                $("#key").val(key);
                oldKey = key;
                $(".result").each(function () {
                    pos.push($(this).offset().top);
                });
                oldCount = $(".result").length;
            }

            $(".result:eq(" + index + ")").addClass("res");

            $("body").scrollTop(pos[index]);
        }
    </script>
</head>
<body>
    <div style="position: fixed; right: 20px; top: 0;">
        <input id="key" type="text" style="width: 100px;" />
        <input type="button" value="下一个" onclick="search()" />
        <input type="button" value="上一个" onclick="search(1)" />
    </div>
    <div style="height: 50px;">
    </div>
    <div style="height: 200px;">
        1待搜索的文本。
    </div>
    <div style="height: 200px;">
        2待搜索的文本。
    </div>
    <div style="height: 200px;">
        3待搜索的文本。
    </div>
    <div style="height: 200px;">
        4待搜索的文本。
    </div>
    <div style="height: 200px;">
        5待搜索的文本。
    </div>
    <div style="height: 200px;">
        10美丽的家乡。
    </div>
    <div style="height: 200px;">
        11美丽的家乡。
    </div>
    <div style="height: 200px;">
        12美丽的家乡。
    </div>
    <div style="height: 200px;">
        13美丽的家乡。
    </div>
    <div style="height: 200px;">
        14美丽的家乡。
    </div>
    <div style="height: 200px;">
        15美丽的家乡。
    </div>
</body>
</html>
时间: 2024-10-11 02:37:32

模拟浏览器搜索功能(Ctrl + F)的相关文章

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

<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>

360浏览器搜索框下拉选择图片js模拟select效果

最近360浏览器网址导航的主页增加了一个下拉选择图片搜索的功能,也就是用js模拟出了select的效果,今天在单位闲了无事干,就把空上功能给摸索出来了,虽然做的不是太完善,但对要求不高的用户来说,已经可以了,而且也可以为学习Js的朋友提供参考. <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>

UltraEdit (Ctrl + F) 查找、(Ctrl + R)替换功能失效

环境: Windows 7 Service Pack 1 X64 工具: UltraEdit Version 21 症状: UltraEdit (Ctrl + F) 查找.(Ctrl + R)替换功能失效 解决:  删除当前用户目录内容 C:\Users\<User Name>\AppData\Roaming\IDMComp\UltraEdit 如 >> C:\Users\Administrator\AppData\Roaming\IDMComp\UltraEdit

URLlib2 模拟浏览器header

urllib2 使用header 模拟浏览器,在urllib 模块里是没有这个功能的 import urllib2 import sys url="http://192.168.1.106" f=urllib2.Request(url) f.add_header('User-Agent', 'Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.8.1.14) Gecko/20080404 (FoxPlus) Firefox/2.0.

Python使用mechanize模拟浏览器

Python使用mechanize模拟浏览器 之前我使用自带的urllib2模拟浏览器去进行訪问网页等操作,非常多站点都会出错误,还会返回乱码.之后使用了 mechanize模拟浏览器,这些情况都没出现过,真的非常好用.这里向大家推荐一下. mechanize是对urllib2的部分功能的替换,能够更好的模拟浏览器行为,在web訪问控制方面做得更全面. 首先从安装開始吧,以ubuntu系统为例: python 绝大部分第三方软件包.都是标准安装方式,从官网下载之后.解压到一个文件夹内,然后在这个

走进http的世界------用C代码模拟浏览器IE(http client)访问web(http server)的行为

在本文中, 我们来玩一下http.   既然你看到了这篇文章, 那就说明你肯定直接或间接借助了http协议(浏览器的实现需要用到http协议). 很多书本把http介绍得玄乎其玄, 高深莫测, 其实,  http也没什么大不了的. 当我们用浏览器看登录www.baidu.com的时候, 浏览器相当于客户端, 而服务端是百度公司掌控着. 要想大致了解http,  网上资料可谓如山如海.作为一名程序员(注意, 我说的是程序猿), 我始终坚信, 没有代码, 没有实践, 只讲理论, 那就是扯淡, 尽管一

telnet客户端模拟浏览器发送请求

telnet 客户端 telnet客户端能够发出请求去连接服务器(模拟浏览器) 使用telnet之前,需要开启telnet客户端 1.进入控制面板 2.进入程序和功能,选择打开或关闭windows功能 3.进入后找到telnet客户端,点击确定 模拟浏览器发出http协议请求 1.打开telnet客户端:进入cmd 2.连接apache服务器 语法:telnet localhost port(telnet localhost 80) 3.数据回显 3.1同时按住:ctrl+右中括号 3.2按下回

Chrome浏览器调试功能介绍

(1)打开: 右击选审查元素 或者 Ctrl+Shift+I 或者 直接按F12 (2)介绍: Elements(元素) 查看.编辑页面上的元素,包括HTML和CSS Resource(资源)       查看到请求的资源情况,包括CSS.JS.图片.Cookies.HTML5的Database和LocalStore等 Network(网络)  分析网站请求的网络情况.查看某一请求的请求头和响应头还有响应内容.你需要先打开开发人员工具,切换到这个选项卡,之后再刷新页面才会有显示. Timelin

获取百度地图POI数据三(模拟关键词搜索)

上一篇博文中讲到如何获取用于搜索的关键词,并且已经准备好了一百五十万的关键词   这其中有门牌号码,餐馆酒店名称,公司名称,道路名称等.有了这些数据,我们就可以通过代码,模拟我们在百度地图的搜索框中搜索地点,从而获取其返回的POI数据.下面直接上代码~ 一 .准备好用于存储数据的数据库表 由于百度返回的POI数据都是JSON字符串且子节点非常多,为了按照子节点一一存储,就需要建这么一张包含很多字段的表,虽然麻烦,但是信息很全面.当然各位也可以选择性的存储其中的数据. 二.获取并解析数据的代码 c