<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
font-size: 13px;
}
p {
border: 1px solid #666666;
width: 280px;
padding: 8px;
line-height: 1.7em;
font-size: 13px;
}
.spn{
padding-left: 20px;
}
.focus{
background-color: #CCCCCC;
color: #fffffff;
}
.txt{
border: 1px solid #666666;
padding: 3px;
}
.btn{
border: 1px solid #666666;
padding: 2px;
width: 60px;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
$(function () {
var search = {
searchstr : function () {
search.clearstr();
var searchText = $("#txtSearch").val();
var regExp = new RegExp(searchText,'g');
if(searchText != "")
{
$('p').each(function () {
var newHtml = $(this).html().replace(regExp,'<span class="focus">'+ searchText +'</span>' );
$(this).html(newHtml);
});
}
},
clearstr:function () {
$('p').each(function () {
$(this).find('.focus').each(function () {
$(this).replaceWith($(this).html());
});
});
}
}
$("#btnSearch").bind("click",search.searchstr);
});
</script>
</head>
<body>
<div>
<input type="text" id="txtSearch" class="txt">
<input type="button" id="btnSearch" class="btn" value="查询">
</div>
<p>
<span class="spn"></span>jQuery发布于2006年,在后续的版本升级中,广大的开发者被其简洁的代码,强悍的功能、优雅的展现,强大的兼容所征服。
<span class="spn"></span>为什么这么多的人都钟爱jQuery,而jQuery恰恰是一把宝刀。
</p>
</body>
</html>