核心代码

全部代码

这个代码主要功能：通过关键字检索出html内容匹配项可进行上一个，下一个切换定位查看；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="/libs/layui/v2.4.5/css/layui.css"><link rel="stylesheet" href="/libs/font-awesome-4.7.0/css/font-awesome.min.css"><style>.layui-search-tool{padding: 4px 0px 0px 0px;background-color: #dffbf8;position: fixed;width: 100%;}.layui-form-item{margin-bottom: 0px;}.body-html{padding: 100px;}.mark-back{background-color: #ff1313;margin: 0px 4px;}.class-search-value{background-color: #fff700;margin: 0px 4px;}.layui-btn{font-size: 16px;}.layui-mark-count span{margin: 0px 4px;}</style>
</head>
<body>
<div class="layui-search-tool"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">查找:</label><div class="layui-input-inline" style="width: 300px;"><input type="text" name="searchValue" id="searchValue" placeholder="输入关键字,按Enter键检索..." autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><button type="button" class="layui-btn layui-btn-sm" id="btn-prev-mark"><span class="fa fa-arrow-circle-o-up"></span></button><button type="button" class="layui-btn layui-btn-sm" id="btn-next-mark"><span class="fa fa-arrow-circle-o-down"></span></button></div><div class="layui-inline"><label class="layui-form-label layui-mark-count" style="width: 120px;padding: 9px 0px;text-align: center;">匹配量:<span>0</span>/<span>0</span>项</label></div></div>
</div><div class="body-html"><p> 国务院决定对《建设项目环境保护管理条例》作如下修改：</p><p>一、删去第六条第二款。</p><p>二、将第七条第二款修改为：“建设项目环境影响评价分类管理名录，由国务院环境保护行政主管部门在组织专家进行论证和征求有关部门、行业协会、企事业单位、公众等意见的基础上制定并公布。”</p><p>三、删去第八条第二款。</p><p> 四、将第九条、第十条合并，作为第九条，修改为：“依法应当编制环境影响报告书、环境影响报告表的建设项目，建设单位应当在开工建设前将环境影响报告书、环境影响报告表报有审批权的环境保护行政主管部门审批；建设项目的环境影响评价文件未依法经审批部门审查或者审查后未予批准的，建设单位不得开工建设。</p><p>“环境保护行政主管部门审批环境影响报告书、环境影响报告表，应当重点审查建设项目的环境可行性、环境影响分析预测评估的可靠性、环境保护措施的有效性、环境影响评价结论的科学性等，并分别自收到环境影响报告书之日起60日内、收到环境影响报告表之日起30日内，作出审批决定并书面通知建设单位。
</p><p> “环境保护行政主管部门可以组织技术机构对建设项目环境影响报告书、环境影响报告表进行技术评估，并承担相应费用；技术机构应当对其提出的技术评估意见负责，不得向建设单位、从事环境影响评价工作的单位收取任何费用。
</p><p>“依法应当填报环境影响登记表的建设项目，建设单位应当按照国务院环境保护行政主管部门的规定将环境影响登记表报建设项目所在地县级环境保护行政主管部门备案。</p><p>“环境保护行政主管部门应当开展环境影响评价文件网上审批、备案和信息公开。”</p>
</div><script src="/libs/jquery/jquery-3.2.1.min.js"></script>
<script src="/libs/layui/v2.4.5/layui.all.js"></script>
<script src="/libs/layer3.1.1/layer.js"></script>
<script>String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) {if (!RegExp.prototype.isPrototypeOf(reallyDo)) {return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi": "g")), replaceWith);} else {return this.replace(reallyDo, replaceWith);}};$(document).ready(function () {var newFlagIndex=-1;//标注最始index 0 用-1 是下面用了 newFlagIndex++/**匹配量展示 2/33 **/function fn_mark_index() {//光标数据展示var markLength=$(".class-search-value").length;$(".layui-mark-count span:nth-of-type(1)").text(newFlagIndex!=-1?newFlagIndex+1:"0");$(".layui-mark-count span:nth-of-type(2)").text(markLength);}/**检索匹配的值 进行标注背景色 **/function fn_set_find_serach_value_mark(value) {if(value){var containsTags=$(".body-html *:contains("+value+")");//查找内容符合条件的元素内容if(containsTags.length>0){for(var i=1;i<containsTags.length;i++){var $tagsHtml=containsTags.get(i);//元素内容var $textYHTML=$tagsHtml.innerHTML;//获取元素HTMLvar upTextHtml="<span class='class-search-value'>"+value+"</span>";var newHTML=$textYHTML.replaceAll(value,upTextHtml);//替换元素内容$tagsHtml.innerHTML=newHTML;//重新赋值渲染}fn_mark_index();}}}/**切换上一个下一个 目标项进行重新标背景色 作为区分**/function fn_new_mark_backColor(index) {//进行重新标背景色$(".class-search-value").css("background-color","#fff700");//all标注重新渲染背景var $mark=$(".class-search-value:eq("+(index)+")");//对切换的目标项进行新背景颜色标注$mark.css("background-color","#ff1313");//}/**进行上下切换 进行光标移动**/function fn_markOffsetTop(index,type){var markLength=$(".class-search-value").length;if(index>=markLength && type=="next"){newFlagIndex=markLength-1;layer.msg("已到最后一个!");return false;}if(index<0 && type=="top"){newFlagIndex=0;layer.msg("已到第一个!");return false;}if(index<0 || index>markLength){return false;}fn_mark_index();fn_new_mark_backColor(index);//跳到切换的目标项var markOffsetTop= $(".class-search-value:eq("+(index)+")")[0].offsetTop;var searchClientTop=$(".layui-search-tool")[0].clientHeight;window.scrollTo({top:markOffsetTop- searchClientTop,behavior: "smooth"});}/**上一个**/$("#btn-prev-mark").off("click").on("click",function () {newFlagIndex=newFlagIndex-1;fn_markOffsetTop(newFlagIndex,"top");});/**下一个**/$("#btn-next-mark").off("click").on("click",function () {newFlagIndex++;fn_markOffsetTop(newFlagIndex,"next");});/**ENTER快捷键 查询**/window.document.onkeydown = searchRefresh;function searchRefresh(evt){evt = (evt) ? evt : window.event;if (evt.keyCode) {if(evt.keyCode === 13){evt.preventDefault();evt.stopPropagation();//重新检索 原来的标注要重置fn_old_mark_reset();newFlagIndex=-1;var searchValue=$("#searchValue").val();if(searchValue==""){return;}fn_set_find_serach_value_mark(searchValue);}}}/**重新检索 原来的标注要重置**/function fn_old_mark_reset() {var markList=$(".class-search-value");if(markList){for(var i=0;i<markList.length;i++){$(markList[i]).replaceWith(markList[i].outerText);//用文本值 替换html值 例如：22 替换标注的 <span class='class-search-value'>22</span>}}}})</script>
</body>
</html>

展示效果

【Jquery】-------JS实现关键字检索html内容，符合关键字的匹配项，进行标注背景色，可进行上一个，下一个切换定位相关推荐

html 获取下一个兄弟节点,js jquery获取当前元素的兄弟级上一个下一个元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
html 获取下一个兄弟节点,JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法...
$(function(){ //遍历获取的input元素对象数组,绑定click事件 var len = $("input[type='file']").length; for(v ...
java多关键字检索_java tree列表关键字检索
java tree列表关键字检索 java tree列表关键字检索如上图所示,想要检索包含a的文件及文件夹. 1.创建一个文件类. import lombok.Data; import java.i ...
jquery兄弟标签_js jquery获取当前元素的兄弟级上一个下一个元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
Javascript JQuery获取当前元素的兄弟元素/上一个/下一个元素（转）
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个 ...
IDEA搜索上一个下一个搜索关键字的快捷键
Ctrl + F: 搜索关键字 F3: 下一个occurrence Shift + F3: 上一个occurrence 类似于eclipse Ctrl + K 和 Ctrl + Shift + K
Python+Pyqt5开发日志关键字检索工具
项目测试中可能会涉及到日志安全测试,会检索组件打印的系统日志中是否包含敏感信息,如身份证号码.电话号码,明文密码等信息.正常组件较少,且日志量较少时,可通过将日志下载到本地,再通过Ctrl+F的方式进 ...
slides.jquery.js快速实现轮播图效果
最近在做项目的时候,发现了这款插件slides.jquery.js,操作起来非常简单,不用自己去敲js代码,只需要简单配置几个属性就可以实现幻灯片轮播了. 使用例子: tips:这个例子不做过多样式的 ...
微信之夜，张小龙说视频化表达将会成为下一个十年内容领域的主题
因为疫情,今年微信的公开课Pro和开发者倍加关注的微信之夜放到了线上举行,微信之父,腾讯高级执行副总裁.微信事业群总裁张小龙的微信之夜直播,更是用今天他在演讲中反复提及的视频号进行直播,将今天的活动推 ...

【Jquery】-------JS实现关键字检索html内容，符合关键字的匹配项，进行标注背景色，可进行上一个，下一个切换定位

JS实现关键字检索html内容，符合关键字的匹配项，进行标注背景色

核心代码

全部代码

展示效果

【Jquery】-------JS实现关键字检索html内容，符合关键字的匹配项，进行标注背景色，可进行上一个，下一个切换定位相关推荐

最新文章

热门文章