在静态页面内实现关键字搜索并高亮显示，效果如图：
示例代码如下，可以直接保存为一个html文件使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面内实现搜索并高亮</title>
<style type="text/css">
.tb {
540px;
margin:10px auto;
}
.tc{
540px;
margin:10px auto;
/*悬浮居中*/
/*position:fixed;*/
/*left:50%;*/
/*top:50%;*/
/*margin-left:-150px;*/
/*margin-top:-110px;*/
}
.highlight {
background-color: yellow;
font-weight: bold;
}
.tg {border-collapse:collapse;border-spacing:0;margin:0px;}
.tg td{border-color:black;border-style:solid;border-1px;font-family:Arial, sans-serif;font-size:14px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-1px;font-family:Arial, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-lboi{border-color:inherit;text-align:left;vertical-align:middle}
.tg .tg-q2kd{background-color:#dae8fc;border-color:inherit;color:#000000;font-family:Arial, Helvetica, sans-serif !important;
font-weight:bold;text-align:left;vertical-align:middle}
.tg .tg-r5f0{background-color:#dae8fc;border-color:inherit;color:#000000;font-family:Arial, Helvetica, sans-serif !important;
font-size:100%;font-weight:bold;text-align:left;vertical-align:middle}
</style>
</head>
<body>
<div class="tc">
<form>
<span style="font-weight: normal;">输入关键字：</span><input type="text" id="txtSearchKeyword" value="" placeholder="请输入关键字查找">
<span class="btn"><button type="button" id="btn" class="btn_in w62">搜索</button></span>
</form>
</div>
<div class="tb">
<table class="tg">
<thead>
<tr>
<th class="tg-r5f0">类型标识</th>
<th class="tg-q2kd">类型名称</th>
<th class="tg-q2kd">类型描述</th>
<th class="tg-q2kd">数据列1</th>
<th class="tg-q2kd">数据列2</th>
<th class="tg-q2kd">数据列3</th>
<th class="tg-q2kd">数据列4</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-lboi">1</td>
<td class="tg-lboi">speed</td>
<td class="tg-lboi">快速版</td>
<td class="tg-lboi">运营类</td>
<td class="tg-lboi">运营类</td>
<td class="tg-lboi">运营类</td>
<td class="tg-lboi">运营类</td>
</tr>
<tr>
<td class="tg-lboi">104</td>
<td class="tg-lboi">helper</td>
<td class="tg-lboi">工具人</td>
<td class="tg-lboi">运营类</td>
<td class="tg-lboi">运营类</td>
<td class="tg-lboi">运营类</td>
<td class="tg-lboi">运营类</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.textSearch-1.0.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
// 页面加载完毕后搜索文本框设置输入焦点
$("#txtSearchKeyword").focus();
// 点击搜索按钮
$("#btn").click(function () {
search();
});
// 键盘回车
$("#txtSearchKeyword").keydown(function (e) {
const curKey = e.which;
if(curKey == 13){
// 回车键
search();
return false;
}
});
});
function search() {
highlight();
}
function highlight() {
//先清空一下上次高亮显示的内容
clearSelection();
//获取输入的关键词
var searchText = $("#txtSearchKeyword").val();
//创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了
var regExp = new RegExp(searchText, 'gi');
//遍历表格每个单元格
var location = 0;
$('td').each(function() {
var html = $(this).html();
//将找到的关键词替换，加上highlight属性
var newHtml = html.replace(regExp, '<span class="highlight">' + searchText + '</span>');
if (html !== newHtml) {
console.log("找到了目标值");
// 更新段落内容，实现高亮
$(this).html(newHtml);
// 记录要跳转的目标位置
location = $(this).offset().top;
}
});
console.log("location: "+location);
// 跳转到搜索到的关键字位置，便于查看
$(window).scrollTop(location);
}
function clearSelection() {
$('td').each(function() {
//找到所有highlight属性的元素
$(this).find('.highlight').each(function() {
//将highlight样式去掉
$(this).replaceWith($(this).html());
});
});
}
</script>
</html>