JSP页面 CTRL+F 功能实现

.res { color: rgba(255, 0, 0, 1) }
.result { background: rgba(255, 255, 0, 1) }

--- js 部分

var oldKey = "";
var index = -1;
var pos = new Array();//用于记录每个关键词的位置，以方便跳转
var posy = 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) {
        $(".result").each(function () {//恢复原始数据
            $(this).replaceWith($(this).html());
        });
        oldKey = "";
        return; //key为空则退出
    }
    if (oldKey != key) {
        //重置
        index = 0;
        $(".result").each(function () {
            $(this).replaceWith($(this).html());
        });
        pos = new Array();
        posy = 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);
            posy.push($(this).offset().left);
        });
        oldCount = $(".result").length;
    }

    $(".result:eq(" + index + ")").addClass("res");//当前位置关键词改为红色字体
    $("body").scrollTop(pos[index]);//跳转到指定位置
    window.scrollTo(0,pos[index]-500);
}

　　

---css 部分

.res {
	color: Red;
}

.result {
	background: yellow;
}

--- JSP 部分

<input id="key" type="text"
placeholder="查找姓名、网点"
style="width: 100px; text-align: right; font-size: 14px;" /> <input
type="button" value="下一个" onclick="next()"
style="font-size: 14px;" /> <input type="button" value="上一个"
onclick="previous()" style="font-size: 14px;" />