前端頁面模擬瀏覽器搜索功能Ctrl+F實現

時間 2019-12-11
原文原文鏈接
<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;">
        一、45648897454。
    </div>
    <div style="height: 100px;">
        二、據 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>