JQuery实例当前页面搜索关键词

学完jQuery现在我们可以去动手做一些复杂的应用了。
该实例实现类似浏览器Ctrl-F页面内搜索关键词的效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>
    <script type="text/javascript" charset="utf-8">
        $(function(){
        $('.sop-start').click(function(){
	$('#search-on-page').show();
});
$('.sop-cancel').click(function(){
		$('#search-on-page').hide();
});
var searchedTextLast = '';
var sopIndex = 0;
var sopCnt = 0;
$('.sop-find').click(function(){
			$('.search-found').each(function(){
				$(this).removeClass('current');
			});

	
	var searchedText = $('.sop-keywords').val();
	if(searchedText != searchedTextLast){
		if(searchedTextLast != ''){
			$('.search-found').each(function(){
				$(this).removeClass('search-found');
			});
		}
		$("p:contains('"+searchedText+"')").each( function( i, element ) {console.log(element)
		  var content = $(element).text();
		  content = content.replaceAll( searchedText, '<span class="search-found">' + searchedText + '</span>' );
		  $(element).html(content).promise().done(function(){
		  	sopIndex = 0;
		  	sopCnt = $('.search-found').length;
		  	$('.sop-info').text('共有'+sopCnt+'匹配项,当前为第'+(sopIndex+1));
		  	searchedTextLast = searchedText;
		  	 $([document.documentElement, document.body]).animate({
		    	scrollTop: $('.search-found').first().offset().top-300
			}, 200);
		});;
			
	});
	}else{

		sopIndex++

		$('.sop-info').text('共有'+sopCnt+'匹配项,当前为第'+(sopIndex));
        $('.search-found').eq(sopIndex).addClass('current');
		if(sopIndex >= sopCnt) sopIndex = sopIndex % sopCnt;
			 $([document.documentElement, document.body]).animate({
		    	scrollTop: $('.search-found').eq(sopIndex).offset().top-300
			}, 200);
	}
	
});
                });
        
    </script>
    <style type="text/css" media="screen">
.search-found{
     text-decoration: underline;
}
.search-found.current{
     background: #fffc89;
}
    </style>
</head>
<body>
    <div id="search-on-page" style="">
        <input name="keywords" placeholder="输入H试试看" type="text" class="sop-keywords">
        <button class="sop-find"> Find </button>
        <button class="sop-cancel"> Cancel </button>
        <div class="sop-info"></div>
    </div>
    <p>
    超文本标记语言（英語：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面[3]。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
    </p>

</body>
</html>
JQuery实例 当前页面搜索关键词

该实例实现类似浏览器Ctrl-F页面内搜索关键词的效果

JQuery实例当前页面搜索关键词
