<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).replaceWith($(this).html());

                });

                oldKey = "";

                return; //key为空则退出

            }

            if (oldKey != key) {

                console.log("进入重置方法");

                //重置

                index = 0;

                $(".result").each(function () {

                    $(this).replaceWith($(this).html());

                });

                pos = new Array();

                var regExp = new RegExp(key+'(?!([^<]+)?>)', 'ig');//正则表达式匹配

                $("body").html($("body").html().replace(regExp, "<span id='result" + index + "' class='result'>" + key + "</span>")); // 高亮操作

                $("#key").val(key);

                oldKey = key;

                $(".result").each(function () {

                    pos.push($(this).offset().top);

                });

                oldCount = $(".result").length;

                console.log("oldCount值：",oldCount);

            }

            $(".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="next()" />

        <input type="button" value="上一个" onclick="previous()" />

    </div>

    <div style="height: 100px;">

    </div>

    <div style="height: 100px;">

        1、45648897454。

    </div>

    <div style="height: 100px;">

        2、据 Ben Geskin 推文显示，三星 S10 果真具有早先已传闻的“打孔屏”设计。对此，营长并不觉得是什么稀奇的事，因为近几年手机市场的厂商们，几乎都在盘算着如何“以貌取胜”，同时，配备让智能手机更智能的 AI 技术也是如今手机的一大卖点。

    </div>

    <div style="height: 100px;">

        2015年，三星风投投资了区块链消费设备ADEPT；。

    </div>

    <div style="height: 100px;">

        2016年，三星集团旗下最大子公司三星数据系统（Samsung SDS）宣布，将投资一家为公司提供基于区块链开发平台的当地公司，理由是区块链技术是足以改变世界的金融创新技术；

    </div>

    <div style="height: 100px;">

        2017年，三星建立以云计算为主的企业级区块链平台 Nexledger；

    </div>

    <div style="height: 100px;">

        2018年1月，三星数据系统宣布投资两家初创公司，其中一家为韩国区块链公司 Blocko，另一家为英国网络安全公司 Darktrace；

    </div>

    <div style="height: 100px;">

       2018年4月，三星开始为 Halong Mining 的 DragonMint T1 矿机生产 10nm 芯片。

    </div>

    <div style="height: 100px;">

        2018年9月，三星 SDS 与韩国海关、韩国银行等合作开发区块链认证平台，

    </div>

    <div style="height: 100px;">

        2018年10月，三星与荷兰银行 ABN AMRO 展开区块链贸易试点项目。

    </div>

    <div style="height: 100px;">

        2019年1月23日，据一位名为 Ben Geskin 的推特网友爆料，三星 Galaxy S10 手机将内置区块链数字钱包服务，并首次报道于三星新闻网站 SamMobile。但截止到撰稿时间，三星对此并没有做出任何回应。但种种迹象表明，这次真有点实锤的意思！

    </div>

    <div style="height: 100px;">

       6666666666666

    </div>

</body>

</html>

前端页面模拟浏览器搜索功能Ctrl+F实现的更多相关文章

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

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

  2. Web前端页面的浏览器兼容性测试心得（二）搭建原汁原味的IE8测试环境

    如果你做的页面被老板或PM要求兼容IE8,你就值得同情了.IE8不支持HTML5,在2017年的前端界,开发者不涉及HTML5标准简直寸步难行.然而,有一个可怕的事实客观存在,那就是IE8是Win7系 ...

  3. 表单提交---前端页面模拟表单提交(form)

    有些时候我们的前端页面总没有<form></form>表单,但是具体的业务时,我们又必须用表单提交才能达到我们想要的结果,LZ最近做了一些关于导出的一些功能,需要调用浏览器默认 ...

  4. 使用springboot实现一个简单的restful crud——03、前端页面、管理员登陆(注销)功能

    前言 这一篇我们就先引入前端页面和相关的静态资源,再做一下管理员的登陆和注销的功能,为后续在页面上操作数据做一个基础. 前端页面 前端的页面是我从网上找的一个基于Bootstrap 的dashboar ...

  5. Web前端页面的浏览器兼容性测试心得（三）总结一些IE8兼容问题的解决方案

    由于IE8不支持HTML5,而它又是Win7的默认浏览器,我们即使讨厌它,在这几年却也拿它没办法. 最近做了个需要兼容IE8的项目,不可避免地用了HTML5+CSS3,甚至canvas和svg,做兼容 ...

  6. Web前端页面的浏览器兼容性测试心得（一）搭建测试用本地静态服务器

    自从实习以来,我体验了由一个人编程再到多人协作编程的转换.同时也接触了很多新鲜事物,学到了很多东西.工作时,常常需要多个人协同测试一张H5页面(PC.手机.平板等跨设备测试),也会经常把页面给PM或老 ...

  7. 利用api模拟百度搜索功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Web前端 页面功能——点击按钮返回顶部的实现方法

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

  9. UltraEdit （Ctrl + F） 查找、（Ctrl + R）替换功能失效

    环境: Windows 7 Service Pack 1 X64 工具: UltraEdit Version 21 症状: UltraEdit (Ctrl + F) 查找.(Ctrl + R)替换功能 ...

随机推荐

  1. loj 2955 「NOIP2018」保卫王国 - 树链剖分 - 动态规划

    题目传送门 传送门 想抄一个短一点ddp板子.然后照着Jode抄,莫名其妙多了90行和1.3k. Code /** * loj * Problem#2955 * Accepted * Time: 26 ...

  2. c# linq分组 lambda分组

    var groupResults = from gr in models && gr.Temperature != && gr.Humidity != &&am ...

  3. 2.1：CGPROGRAM

    文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 前言 经过前面两个章节的铺垫,我们对渲染以及Unity Shaderlab ...

  4. CentOS7部署vsftpd服务

    1.查看是否已经安装了vsftpd vsftpd -version 2.安装vsftpd(CentOS7) yum install -y vsftpd 3.新建FTP目录 创建的FTP目录如下: /d ...

  5. 基础知识---委托和 lambda

    委托定义类型,类型指定特定方法签名. 可将满足此签名的方法(静态或实例)分配给该类型的变量,然后(使用适当参数)直接调用该方法,或将其作为参数本身传递给另一方法再进行调用. 以下示例演示了委托的用法. ...

  6. mysqlbinlog恢复误删数据

    概述 代码bug,在处理上传出现异常时执行了DELETE FROM t_resource WHERE resource_id = ? OR parent_id = ?因为OR条件导致用户的上传的所有数 ...

  7. eclipse使用maven，启动工程tomcat报错：java.lang.ClassNotFoundException: org.springframework.web.context.Contex

    maven是个不错的管理jar包工具,但是我们在eclipse使用maven时,总是遇上这样那样的问题,比如今天,我编译工程,启动过后,tomcat报错:java.lang.ClassNotFound ...

  8. C#左移运算符

     << 左移操作符.简单理解是对变量进行与2的n次乘方的运算.比如x<<1=x*2x<<2=x*4x<<3=x*8x<<4=x*16依此类推 ...

  9. winform子窗口与父窗口的交互-使用委托与事件

    实现子窗口与父窗口的交互,通过父窗口调用并控制子窗口,子窗口也能控制父窗口,使用委托和事件的方法,可以实现. 1.父窗口调用子窗口,并通过子窗口控制父窗口 新建工程,创建两个窗体    显示子窗体的代 ...

  10. 如何写出优雅的 Golang 代码

    原文: https://draveness.me/golang-101.html Go 语言是一门简单.易学的编程语言,对于有编程背景的工程师来说,学习 Go 语言并写出能够运行的代码并不是一件困难的 ...