[点晴永久免费OA]纯JS脚本模拟浏览器页面查找并跳转到指定文本内容
当前位置:点晴教程→点晴OA办公管理信息系统
→『 经验分享&问题答疑 』
:纯JS脚本模拟浏览器页面查找并跳转到指定文本内容
<style type="text/css"> .result{background:yellow;color:red;font-weight:normal;} .res{background:yellow;color:red;font-weight:bold;} </style> <script type="text/javascript" src="http://www.clicksun.cn/mis/js/jquery-2.1.1.min.js"></script> <script language="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) { //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(); var regExp = new RegExp(key+'(?!([^<]+)?>)', 'ig'); //正则表达式匹配 $("td").each(function () { //不用.table去遍历这样会导致点击方法失效,直接替换最小单位的td就行 $(this).html($(this).html().replace(regExp, "<span id='result" + index + "' class='result'>" + key + "</span>")); // 高亮操作 }) $("#key").val(key); oldKey = key; $(".result").each(function () { if($(this).offset().top == 0){ return; } }); oldCount = $(".result").length; } $(".result:eq(" + index + ")").addClass("res"); //当前位置关键词改为红色字体 $(".result:eq(" + index + ")").attr("id", "result" + index); //当前位置强制更改ID,方便定位跳转 window.location.hash="#result" + index; //强制跳转到此ID } window.onload=function(){ document.getElementById("key").onkeydown=function(event){ if(event.keyCode==13){next();} } } </script> <input type="text" id="key" placeholder="流程名称关键词" style="width:150px;border-radius:5px;padding-left:6px;height:25px;border:1px #AAAAAA solid;" onchange="next();"/><img src="/mis/images/search_18.gif" style="position:relative;MARGIN-TOP:-3px;MARGIN-LEFT:-22px;MARGIN-right:6px;cursor:pointer;" align="absmiddle" onclick="next();" title="搜索"> 该文章在 2023/4/28 10:51:47 编辑过 |
关键字查询
相关文章
正在查询... |