一
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>演示：jQuery实现页内查找相关内容</title>
<style>
span { background:yellow; }
</style>
<script>
window.onload=function(){
var inp=document.getElementsByTagName("input");
var oP=document.getElementById("box");
inp[1].onclick=function(){
var str = inp[0].value;
if (!str)return; //若内容不存在即返回
oP.innerHTML=oP.innerHTML.split(str).join('<span>'+str+'</span>')
}
};
</script>
</head>
<body>
<input type="text" />
<input type="button" value="查找" />
<div id="box">
<p >
轻轻的我走了，正如我轻轻的来；我轻轻的招手，作别西天的云彩。<br/>
那河畔的金柳，是夕阳中的新娘；波光里的艳影，在我的心头荡漾。<br/>
软泥上的青荇，油油的在水底招摇；在康河的柔波里，我甘心做一条水草！ <br/>
那榆荫下的一潭，不是清泉，是天上虹；揉碎在浮藻间，沉淀着彩虹似的梦。<br/>
寻梦？撑一支长篙，向青草更青处漫溯；满载一船星辉，在星辉斑斓里放歌。<br/>
但我不能放歌，悄悄是别离的笙箫；夏虫也为我沉默，沉默是今晚的康桥！<br/>
悄悄的我走了，正如我悄悄的来；我挥一挥衣袖，不带走一片云彩
</p>
</body>
</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;//获取元素HTML
var 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>
三
html
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索..">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Url</th>
</tr>
<tr>
<td>Google</td>
<td>www.google.com</td>
</tr>
<tr>
<td>Runoob</td>
<td>www.runoob.com</td>
</tr>
<tr>
<td>Taobao</td>
<td>www.taobao.com</td>
</tr>
<tr>
<td>Baidu</td>
<td>www.baidu.com</td>
</tr>
</table>
js
function myFunction() {
// 声明变量
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable"); //要找的所有元素的共同父结点
tr = table.getElementsByTagName("tr"); //所有元素的共同父结点下的每一个元素的同类父结点
// 循环遍历所有列表项，并隐藏那些与搜索查询不匹配的项
for (i = 0; i < tr.length; i++) { //遍历每一个元素的同类父节点（如果不想遍历最后一个的话，可以选择tr.length-1不遍历最后一个。）
td = tr[i].getElementsByTagName("td")[0]; //同类父节点下的要找的元素的具体位置
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none"; //不是的话就隐藏
}
}
}
}
转载
【Jquery】-------JS实现关键字检索html内容，符合关键字的匹配项，进行标注背景色，可进行上一个，下一个切换定位_皮皮冰要做大神的博客-CSDN博客_jq搜索关键字功能
https://blog.csdn.net/qq_38366657/article/details/125427708
JS字符串查找（6种方法）
http://c.biancheng.net/view/5581.html
html页面实现搜索关键字展示 - 高柴小生 - 博客园
https://www.cnblogs.com/chaishengblog/p/16796735.html
info 评论功能已经关闭了呐!