仿浏览器html本地搜索

最新推荐文章于 2025-06-08 20:05:08 发布

原创

最新推荐文章于 2025-06-08 20:05:08 发布 · 3.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html #搜索

本文介绍了如何仿浏览器实现HTML内容的本地搜索功能，并通过jQuery进行高亮标记。讲解了JavaScript代码、HTML代码的实现原理，包括清除查询结果、正则匹配、添加特殊样式、焦点移动等步骤，同时详细解释了jQuery的eq()、parents()、replace()、offset()和scrollTop()等方法的运用。

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

仿浏览器html本地搜索

本文为整理博客，仿浏览器做的一个html本地内容搜索并标记指向搜索文本

JavaScript
jquery
css

效果图

JavaScript Code：


var oldKey0 = "";
var index0 = -1; var oldCount0 = 0;
var newflag = 0;
var currentLength = 0;

function wordSearch(flg) {
   
   
    var key = $("#search_key").val(); //取key值
    if (!key) {
   
   
        return; //key为空则退出
    }
    console.log("key：" + key);
    getArray();
    focusNext(flg);

}

function focusNext(flg) {
   
   
    if (newflag == 0) {
   
   //如果新搜索,index清零
        index0 = 0;
    }
    if (!flg) {
   
   
        if (oldCount0 != 0) {
   
   //如果还有搜索
            if (index0 < oldCount0) {
   
   //左边如果没走完，走左边
                focusMove(index0);
                index0++;
            } else if (index0 == oldCount0) {
   
   //都走完了
                index0 = 0;
                focusMove(index0);
                index0++;
            }
            else {
   
   
                index0 = 0;//没确定
                focusMove(index0);
                index0++;
            }
        }

    } else {
   
   
        if (oldCount0 != 0) {
   
   //如果还有搜索
            if (index0 <= oldCount0